【问题标题】: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>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-07-30
      • 2018-01-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-10-03
      • 1970-01-01
      • 2020-02-15
      相关资源
      最近更新 更多