前端之家收集整理的这篇文章主要介绍了
React-Native基础_3.Flex布局，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_
404_0@Flex布局介绍
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
'use strict'
import React,{Component} from 'react';
import {
AppRegistry,StyleSheet,Text,View
} from 'react-native';
//import {AppRegistry,} from 'react-native';
//import Day0718 from './componets/Home'
export default class Day0718 extends Component {
render() {
return (
<View style={styles.Container}>
<View style={[styles.item,styles.itemOne]}>
<Text style={styles.itemText}>1</Text>
</View>
<View style={[styles.item,styles.itemTwo]}>
<Text style={styles.itemText}>2</Text>
</View>
<View style={[styles.item,styles.itemThree]}>
<Text style={styles.itemText}>3</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
item:{
backgroundColor:'#fff',borderWidth:1,borderColor:'#6435c9',margin:6,flex:1,},itemOne:{
// alignSelf:'flex-start',itemTwo:{
//alignSelf:'center',itemThree:{
flex:2,itemText:{
fontSize:33,fontFamily:'Helvetica Neue',fontWeight:'200',color:'#6435c9',padding:30,Container: {
//alignItems:'flex-start',// flex-start 靠在左边
显示 center 居中 flex-end 尾部
//
flexDirection:'column',//row column 方向
backgroundColor: '#eae7ff',flex: 1,//justifyContent:'center',//center ; 居中 flex-end 位于
底部 space-between/space-around屏幕平均分配
},Text: {
color: '#6435c9',fontSize: 26,textAlign: 'center',fontStyle: 'italic',letterSpacing: 2,lineHeight: 33,fontFamily: 'Helvetica Neue',fontWeight: '300',textDecorationLine: 'underline',textDecorationStyle: 'dashed',});
AppRegistry.registerComponent('Day0718',() => Day0718);
Flex布局是React-Native 中常用的布局语法。
