React Native中如何实现Bottom Bar（底部导航栏）固定不滚动？

固定底部导航栏解决方案 #

你遇到的问题为根布局未正确设置弹性布局属性导致，按以下步骤修改即可：

• 给根节点SafeAreaView添加flex: 1样式：这是让页面按垂直方向分配空间的核心，没有该属性时根容器高度会等于所有子元素总高度，整个页面会整体滚动，底部导航自然会跟随移动
• 修正SafeAreaView的属性笔误：你当前代码中写的是styles，React Native 中样式属性名为单数的style
• 可选优化：给ScrollView添加flexGrow: 1属性，确保滚动区域可以占满除头部、底部之外的所有剩余空间

修改后的参考代码如下：

<SafeAreaView style={[SafeViewAndroid.AndroidSafeArea, {flex: 1}]}>
  <View style={{ backgroundColor: "#fff", padding: 15 }}>
    <HeaderTabs activeTab={activeTab} setActiveTab={setActiveTab} />
    <SearchBar cityHandler={setCity} />
  </View>
  <ScrollView showsVerticalScrollIndicator={false} style={{flexGrow: 1}}>
    <Categories />
    <RestaurantItems restaurantData={restaurantData} />
  </ScrollView>
  <Divider width={1} />
  <BottomTabs />
</SafeAreaView>

如果修改后仍然存在滚动问题，可检查SafeViewAndroid.AndroidSafeArea样式中是否包含干扰布局的属性，比如高度设置为自适应内容等。

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