React-Native基础_3.Flex布局

来源：互联网发布：java web start 编辑：程序博客网时间：2024/05/20 14:18
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 中常用的布局语法。
阅读全文
0 0