如何使我的底部栏固定在 React Native 中？答案

【问题标题】：How to make my Bottom Bar fixed in React Native?如何使我的底部栏固定在 React Native 中？
【发布时间】：2021-12-30 23:31:36
【问题描述】：

嘿

我的底栏在滚动视图组件之外，但它仍然与其他组件一起滚动。我怎样才能修复它？

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

Entire Code Screen

【问题讨论】：

滚动视图之外的任何内容都不会滚动
我是在网络上而不是在模拟器上查看它，这可能是问题吗？
在网页上可以试试位置属性

标签： javascript react-native mobile

【解决方案1】：

您可以使用弹性比例来分隔和组件，如下所示

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

【讨论】：

【解决方案2】：

您可以通过将按钮组件设置为 -

<TouchableOpacity
    style={{
        width: 60,
        height: 60,
        backgroundColor: 'red',
        position: 'absolute',
        bottom: 50,
        justifyContent: 'center',
        alignItems: 'center',
    }}
    onPress={() => {
        console.log('Button Pressed')
    }}
>
    <Text>Hello Bottom Button</Text>
</TouchableOpacity>

【讨论】：