React-Native基础_3.Flex布局

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 中常用的布局语法。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!