组件：
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}>网易</Text>
<Text style={styles.font_2}>新闻</Text>
<Text>有态度</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);
碰到最大的坑，组件名字首字母必须大写，不然不行，这坑让我发了一个小时。
效果：
2786B2DA-8163-4310-A60B-027D766470A7.png
