React Native的View是否和HTML的Div作用一致？多View布局异常如何解决？

架构老林

2026-9-23

问题根因

React Native的View默认采用Flex布局，规则和HTML的div差异很大，你当前布局异常的核心原因是最外层包裹子元素的View没有设置flex: 1属性，父容器没有明确占满屏幕的前提下，子View设置的flex:1不会生效，只会收缩到和内容匹配的尺寸。

修复后的可用代码

以下代码实现第一个View占满除底部外的所有空间、内容居中，第二个View固定在底部的效果：

import React from 'react'
import { Button, StyleSheet, Text, View,ScrollView } from 'react-native';
export default function Home() {
    return (
        // 外层父容器添加flex:1撑满整个屏幕
        <View style={{flex: 1}}>
            <View style={styles.container}>
              <Text>
                Books are the best Mentors
              </Text>
            </View>
            <View style={styles.container2}>
            <Text style={{backgroundColor:'red'}}>
                Books are the best Mentors
            </Text>
            </View>
        </View>
    );
};
        
const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
    container2: {
        paddingVertical: 20,
        backgroundColor: '#fff',
        width: '100%',
        alignItems: 'center'
    },
});

多View布局核心规则

所有需要按比例分配屏幕空间的场景，必须先给最外层父容器设置flex: 1，让它撑满整个屏幕
同级View的空间分配：给每个View设置对应的flex数值，数值为占比，比如两个同级View分别设flex: 2和flex: 1，就会按2:1分配父容器的剩余空间
React Native的Flex默认主轴为纵向（flexDirection: column），和Web默认横向的规则完全不同，要实现横向并排的布局，手动给父View设置flexDirection: row
绝对定位的View不需要设置flex属性，优先通过top/bottom/left/right控制位置
如果子元素高度超过屏幕高度，在外层包裹ScrollView替代普通View即可实现滚动