React Native基础&入门教程：初步使用Flexbox布局 React Native基础&入门教程：调试React Native应用的一小步

前端开发作者： 2024-08-22 01:55:01

在上篇中，笔者分享了部分安装并调试React Native应用过程里的一点经验，如果还没有看过的同学请点击《React Native基础&入门教程：调试React Native应用的一小步》。

import {
　　Text,　　View,　　Dimensions,　　PixelRatio
} from 'react-native';
const { height,width } = Dimensions.get('window');
const pxRatio = PixelRatio.get();
<View style={styles.container}>
　　<Text style={styles.welcome}>
　　　　{`width: ${width},height: ${height}`}
　　</Text>
　　<Text style={styles.welcome}>
　　　　{`pixel radio: ${pxRatio}`}
　　</Text>
</View>

alignItems 指定item在侧轴上的对齐方式
alignContent 指定item在多条轴上的对齐方式
flexDirection 指定主轴方向
flexWrap 指定item在主轴方向如何换行
flexFlow flexDirection属性和flexWrap属性的简写形式
justifyContent 指定item在主轴上的分布方式

alignSelf 每个item可以单独设置对齐方式覆盖Flex Container给设置的alignItems
order 指定item排列顺序数字越小越靠前
flexGrow 指定item的拉伸比例
flexShrink 指定item的压缩比例
flexBasis 指定item在分配多余空间之前，占主轴的大小
flex 其实是 flexGrow flexShrink flexBasis的简写

<View>
    <View style={styles.row}>
        <Text style={styles.item}>1</Text>
        <Text style={styles.item}>2</Text>
        <Text style={styles.item}>3</Text>
    </View>
    <View style={styles.rowReverse}>
        <Text style={styles.item}>1</Text>
        <Text style={styles.item}>2</Text>
        <Text style={styles.item}>3</Text>
    </View>
    <View style={styles.column}>
        <Text style={styles.item}>1</Text>
        <Text style={styles.item}>2</Text>
        <Text style={styles.item}>3</Text>
    </View>
    <View style={styles.columnReverse}>
        <Text style={styles.item}>1</Text>
        <Text style={styles.item}>2</Text>
        <Text style={styles.item}>3</Text>
    </View>
</View>

row: {
backgroundColor: '#ffe289',flexDirection: 'row'
},rowReverse: {
flexDirection: 'row-reverse'
}} 'column-reverse'
}









<View>
    <View style={styles.defaultFlex}>
        <Text style={styles.item}>1</Text>
        <Text style={styles.item}>2</Text>
        <Text style={styles.item}>3</Text>
    </View>
</View>



defaultFlex: {
height: 300,backgroundColor: '#ffe289',display: 'flex'
}














<View style={styles.container}>
    <View style={styles.flex1}></View>
    <View style={styles.flex2}></View>
    <View style={styles.flex3}></View>
</View>



container: {
flex: 1
}
// height: 99,flexGrow: 1,backgroundColor: 'orange',}
flexGrow: 2,backgroundColor: 'lightblue',flex3: { 3,backgroundColor: 'green',









<View style={styles.container}>
    <View style={styles.header}></View>
    <View style={styles.body}></View>
    <View style={styles.footer}></View>
</View>



 60,body: { 1,footer: {




<View style={styles.header}>
    <Text style={styles.back}>返回</Text>
    <Text style={styles.title}>这是一个标题</Text>
    <Text style={styles.exit}>×</Text>
</View>



header: {{
color: 'white',marginLeft: 15
}}
marginRight: 20,color: 'white'
}





<View style={styles.footer}>
    <Text style={styles.firstMenu}>添加</Text>
    <Text style={styles.menu}>删除</Text>
    <Text style={styles.menu}>修改</Text>
</View>



footer: {}






<View style={styles.body}>
    <View style={styles.inputRow}>
        <TextInput style={styles.textInput}></TextInput>
        <Button style={styles.btn} onPress={() => {}} title="确定"></Button>
    </View>
    <View style={styles.inputRow}>
        <TextInput style={styles.textInput}></TextInput>
        <Button style={styles.btn} onPress={() => {}} title="非常确定"></Button>
    </View>
    <View style={styles.inputRow}>
        <TextInput style={styles.textInput}></TextInput>
        <Button style={styles.btn} onPress={() => {}} title="确定一定以及肯定"></Button>
    </View>
</View>



body: { 'row',alignItems: 'center',marginLeft: 10,marginRight: 10
}{
minWidth: 60
}