/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, {Component} from 'react';
import { AppRegistry,Text,View,StyleSheet,} from 'react-native';
export default class FlexDirectionBasics extends Component {
constructor(props) {
super(props);
}
render() {
return(
<View style={{ flex: 1,flexDirection: 'row',justifyContent: 'center',alignItems: 'center'}}>
<View style={{ width: 50,height: 50,backgroundColor: 'red' }}>
<Text>美丽的夜晚</Text>
</View>
<View style={{ width: 50,height: 50,backgroundColor: 'blue' }}>
<Text>学习学习</Text>
</View>
<View style={{ width: 50,height: 50,backgroundColor: 'yellow' }}>
<Text>嗨皮</Text>
</View>
<View style={{ width: 50,height: 50,backgroundColor: 'black'}}>
<Text>我旁边有你</Text>
</View>
</View>
)
}
}
AppRegistry.registerComponent('xiao', () => FlexDirectionBasics);
react-native 使用Flexbox布局
最新推荐文章于 2024-08-16 09:40:25 发布