[Wondgirl]從零開始學React Native之View(四)
阿新 • • 發佈:2019-02-15
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:1 },styles.lineCenter]}>
<Text style={styles.font}>火車票</Text>
</View>
<View style={[styles.center,{flex:1}]}>
<Text style={styles.font}>接送機</Text>
</View>
</View>
<View style={[styles.item,styles.lineLeftRight]}>
<View style={[styles.center,{flex:1 },styles.lineCenter]}>
<Text style={styles.font}>汽車票</Text>
</View>
<View style={[styles.center,{flex:1}]}>
<Text style={styles.font}>用車</Text>
</View>
</View>
</View>
);
}
}
//樣式
const styles = StyleSheet.create({
item:{
flex:1,
height:80,
borderColor:'blue',
borderWidth:1,
backgroundColor:'#ff0067'
},
container: {
borderWidth:1,
borderColor:'red',
flexDirection:'row',
marginTop:40,
marginLeft:20,
marginRight:20
},
font:{
color:'#fff',
fontSize:16,
fontWeight:'bold'
},
center:{
justifyContent:'center',
alignItems:'center'
},
lineCenter:{
borderBottomWidth:1/PixelRatio.get(),
borderColor:'#fff'
},
lineLeftRight:{
borderLeftWidth:1/PixelRatio.get(),
borderRightWidth:1/PixelRatio.get(),
borderColor:'#fff'
}
});
AppRegistry.registerComponent('demo', () => demo);