因本人水平有限,不足之处还望指正。
先上图。
代码:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
export default class pro2 extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
hello world!
</Text>
<Text style={styles.welcomee}>
hello world!
</Text>
<Text style={styles.welcomeee}>
hello world!
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection:'row',
borderBottomWidth:0.5,
borderTopWidth:0.5,
borderColor:'red',
marginTop:10,
paddingLeft:10,
paddingRight:10,
height:100,
},
welcome: {
fontSize: 20,
color:'red',
flex:1,
height:99,
backgroundColor:'green',
textAlign:'center',
},
welcomee: {
fontSize: 20,
color:'red',
flex:1,
height:99,
backgroundColor:'blue',
textAlign:'center',
},
welcomeee: {
fontSize: 20,
color:'red',
flex:1,
height:99,
backgroundColor:'yellow',
textAlign:'center',
},
});
AppRegistry.registerComponent('pro2', () => pro2);
今天学习了reactNative中的flex布局。今天实现的是在一个组件套3个