![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI0NXYFhGd192UvwVe0lmdhJ3ZvwFM38CXlZHbvN3cpR2Lc1TPB10QGtWUCpEMJ9CXsxWam9CXwADNvwVZ6l2c052bm9CXUJDT1wkNhVzLcRnbvZ2Lc1zdtNGckdkW1ljMkZXUYpVd1kmYr50MZV3YyI2cKJDT29GRjBjUIF2LcRHelR3LcJzLctmch1mclRXY39jN5UzN0ADM1EzMyITM2EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
index.ios.js如下:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
PixelRatio
} from 'react-native';
export default class demo extends Component {
render() {
return (
<View style={styles.container}>
<View style={[styles.item,styles.center]}>
<Text style={styles.font}>机票</Text>
</View>
<View style={[styles.item,styles.lineLeftRight]}>
<View style={[styles.center,{flex:},styles.lineCenter]}>
<Text style={styles.font}>火车票</Text>
</View>
<View style={[styles.center,{flex:}]}>
<Text style={styles.font}>接送机</Text>
</View>
</View>
<View style={[styles.item,styles.lineLeftRight]}>
<View style={[styles.center,{flex:},styles.lineCenter]}>
<Text style={styles.font}>汽车票</Text>
</View>
<View style={[styles.center,{flex:}]}>
<Text style={styles.font}>用车</Text>
</View>
</View>
</View>
);
}
}
//样式
const styles = StyleSheet.create({
item:{
flex:,
height:,
borderColor:'blue',
borderWidth:,
backgroundColor:'#ff0067'
},
container: {
borderWidth:,
borderColor:'red',
flexDirection:'row',
marginTop:,
marginLeft:,
marginRight:
},
font:{
color:'#fff',
fontSize:,
fontWeight:'bold'
},
center:{
justifyContent:'center',
alignItems:'center'
},
lineCenter:{
borderBottomWidth:/PixelRatio.get(),
borderColor:'#fff'
},
lineLeftRight:{
borderLeftWidth:/PixelRatio.get(),
borderRightWidth:/PixelRatio.get(),
borderColor:'#fff'
}
});
AppRegistry.registerComponent('demo', () => demo);