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

Question

Hey

I have my bottom bar out the Scroll View component,But it still scroll with the other components. How can i make it fixed?

"

<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

Answer 1

You can use flex proportions to separate the and components, as below

<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>

Answer 2

You can do it by styling your button component as -

<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>