如何使用Flexbox实现React Native应用登录界面布局

调整逻辑 #

你之前用固定百分比margin控制间距的方式适配性很差，正确的Flexbox实现逻辑是利用flex权重分配容器内各区域的垂直空间，无需写死固定间距就能实现三段式布局：

• 容器默认是垂直主轴排列，给头部、表单、底部三个区域分别设置flex值，控制各自占屏幕高度的比例
• 各区域内再用justifyContent控制内容的对齐位置，就能实现标题靠上、表单居中、底部链接靠下的效果

修改后的样式代码 #

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#cde9ff',
      alignItems: 'center',
      // 移除原来的justifyContent: 'center'，避免所有内容挤在中间
      borderWidth: 5,
      paddingHorizontal: 20, // 加左右内边距避免内容贴边
    },
    header: {
        flex: 1, // 占1份高度
        justifyContent: 'flex-end', // 让标题在当前区域底部显示，自然和下方表单拉开距离
        borderWidth: 1,
        fontSize: 38,
        marginBottom: 20, // 小数值固定间距即可，不用百分比
    },
    form: {
        flex: 2, // 占2份高度，作为核心区域
        justifyContent: 'center', // 表单内容在当前区域居中
        width: '100%', // 占满容器宽度，方便输入框自适应
        alignItems: 'center',
        borderWidth: 1,
    },
    input: {
        width: '80%', // 改成百分比宽度适配不同屏幕
        maxWidth: 300, // 最大宽度限制，大屏不会太宽
        height: 44,
        padding: 10,
        borderWidth: 1,
        borderColor: 'black',
        marginBottom: 10,
        backgroundColor: 'white',
        color: 'black',
        borderRadius: 10,
      },
    footer: {
        flex: 1, // 占1份高度
        justifyContent: 'flex-end', // 底部内容靠当前区域底部显示
        paddingBottom: 30, // 避免贴屏幕最底部
        borderWidth: 1,
    },
  });

配套JSX结构参考 #

要保证样式生效，你的页面结构要和样式对应：

<View style={styles.container}>
  <Text style={styles.header}>登录</Text>
  <View style={styles.form}>
    <TextInput style={styles.input} placeholder="请输入用户名" />
    <TextInput style={styles.input} placeholder="请输入密码" secureTextEntry={true} />
    {/* 可自行添加登录按钮、记住密码等组件 */}
  </View>
  <View style={styles.footer}>
    <Text>没有账号？立即注册</Text>
  </View>
</View>

内容的提问来源于stack exchange，提问作者Tempuslight