組件：
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
PixelRatio,
View
} from 'react-native';
export default class Header extends React.Component
{
render(){
return (
<View style={styles.flex}>
<Text style={styles.font}>
<Text style={styles.font_1}>網(wǎng)易</Text>
<Text style={styles.font_2}>新聞</Text>
<Text>有態(tài)度</Text>
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
flex:{
marginTop:25,
height:50,
borderBottomWidth:3 / PixelRatio.get(),
borderBottomColor:'#EF2D36',
alignItems:'center'
},
font:{
fontSize:25,
fontWeight:'bold',
textAlign:'center'
},
font_1:
{
color:'#CD1D1C'
},
font_2:
{
color:'#FFF',
backgroundColor:'#CD1D1C'
}
});
使用組件：
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
PixelRatio,
View
} from 'react-native';
import Header from './header'
class hello extends Component {
render()
{
return (
<View style = {styles.flex}>
<Header></Header>
</View>
);
}
}
const styles = StyleSheet.create({
flex:{
flex:1
},
});
AppRegistry.registerComponent('hello', () => hello);
碰到最大的坑漠趁，組件名字首字母必須大寫扁凛，不然不行，這坑讓我發(fā)了一個小時闯传。
效果：
2786B2DA-8163-4310-A60B-027D766470A7.png
