react-native style introduced

     react-native

     The first: the use of style tags inside

      

import React from 'react';
class Demo extends React.Component{
    render(){
        return(
             <div>
                 <div
                     style={{
                       width:'100px',
                       height:'80px',
                       backgroundColor:'red',
                       fontSize:'24px',
                       textAlign:'center'
                       }}
                >Demo!</div>

               );
          }
       }
export default Demo; 

2, the style seen as an object, and then introduced into

      

import React from 'react';

class Demo extends React.Component{
          render(){
             let mystyle={
                 width:'200px',
                 height:'80px',
                 backgroundColor:'yellow',
                 fontSize:'24px',
                 textAlign:'center'
              }
        return(
            <div>
                  <div style={mystyle}>This is Page1!</div>
            </div>
          );
            }
       }

export default Demo;

3, the introduction of external css file

#mydiv{
width:200px;
height:80px;
background-color:yellow;
font-size:24px;
text-align:center
}

import React from 'react';
require('./style.css');

class Demo extends React.Component{
         render(){
            return(
                 <div>
                     <div id='mydiv'>This is Page1!</div>
                 </div>
             );
         }
   }

export default Demo;