react-native样式引入

react-native

第一种：在标签内部使用样式

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、将style看做一个对象，然后进行引入

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、外部引入css文件

#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;