React Native实现局部滚动且底部栏固定在屏幕底部的问题咨询

要实现内部容器滚动、底部栏固定在屏幕底部的效果，只需调整布局的flex配置即可，无需依赖Dimensions或多余的overflow属性，具体修改如下：

修改后的代码 #

import { StyleSheet, View, ScrollView } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
        <ScrollView style={styles.topHalf}>
            <View style={styles.innerScrollable}></View>
        </ScrollView>
        <View style={styles.bottomHalf}></View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1, // 替换height: "100%"，自动占满屏幕并响应尺寸变化
    width: "100%",
  },
  topHalf: {
    flex: 1, // 占据除底部栏外的所有可用空间
    // 移除overflow: "scroll"，ScrollView本身自带滚动能力
  },
  bottomHalf: {
    height: 100,
    backgroundColor: "#fff",
  },
  innerScrollable: {
    height: 2000,
    backgroundColor: "#000",
  },
});

关键修改说明 #

• 容器布局用flex:1：将container的height: "100%"改为flex:1，这是React Native中让容器占满屏幕的标准方式，能自动适配屏幕旋转、键盘弹出等尺寸变化场景，避免了Dimensions无法动态更新的问题。
• 移除多余的overflow属性：ScrollView组件本身已经封装了滚动逻辑，给它设置overflow: "scroll"属于画蛇添足，反而可能导致布局冲突，让整个页面滚动而非内部容器滚动。
• Flex分配空间：topHalf设置flex:1后，会自动占据container中除bottomHalf（固定高度100）之外的所有空间，这样底部栏会始终固定在屏幕底部，而内部的ScrollView只在自己的区域内滚动。

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