如何在 react-native 中修复页面底部的页脚？答案

【问题标题】：How to fix the footer on bottom of the page in react-native?如何在 react-native 中修复页面底部的页脚？
【发布时间】：2021-06-24 01:42:35
【问题描述】：

我想修复页面底部的页脚，

这就是为什么我的整个容器都在flex:1 所以它占用了所有空间，

在我的页脚中，我添加了position:"absolute",marginBottom:0,，页脚影响如此之大，这是我没想到的。它像页面标题一样上升，然后我将其删除，

如何在页面底部修复它？

这是相关代码。

    <SafeAreaView style={{ flex: 1, backgroundColor:"#ffffff", }}>
{/* Footer */}
        <View style={{ flexDirection:"row", alignItems:"center", justifyContent:"space-between",marginHorizontal:35,}}>
        <View> // here there are some code
         <View> 
          <Home height={30} width={22} fill={"#1E2439"} />
          <Ratio height={30} width={22} fill={"#1E2439"} />
          <Time height={30} width={22} fill={"#1E2439"} />
          <User height={30} width={22} fill={"#1E2439"} />

        </View>   

      </View>

    </SafeAreaView>

页面显示如下：

【问题讨论】：

你的问题不清楚。在 react-native 中，如果你使用绝对位置，你应该给它一个宽度和高度。
当我使用宽度，高度时它仍然不起作用，我添加marginBottom：0，不，它不会进入底部
你应该使用bottom:0，而不是margin-bottom。

标签： css react-native

【解决方案1】：

位置来自css语言。

{
  position:"absolute",
  bottom:0
}

【讨论】：

说实话，它不能正常工作。我有一个页面，我在那个页面上有一个按钮，当我写位置：绝对和底部：0 时，页脚不会停留在底部：0 它发生这样的情况（在问题上添加图片），你知道我怎么能改一下？
页脚是哪一个？你可以更清楚地描述你的问题。最好粘贴更多代码。
对不起，我刚刚阅读了消息，我的问题中的整个代码都是用于页脚，

【解决方案2】：

这是我的固定页脚代码

<View style={{flex:1}}>
<ScrollView style={{flex:1}}>
/// some Code
</ScrollView>

// here is bottom bar

<View style={{height: 60, justifyContent: 'center', borderTopLeftRadius: 20, borderTopRightRadius: 20, flexDirection: 'row', alignContent: 'center', alignItems: 'center'}}>

<View style={{flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center'}}>

//Here is you bottom icon or image
<View>

</View>

</View>

【讨论】：

你想把页脚固定在滚动视图的底部吗？
也许你可以添加一些评论显示哪个是页脚？并将页脚滚动视图底部栏保持在一起。
如果你的滚动视图内容长于窗口高度，页脚是否应该放置？
那么你的问题是什么？

【解决方案3】：

位置来自 CSS 语言。

{
  position:"absolute",
  bottom:0,
  height: 60
}

【讨论】：

能否详细说明您的帖子与 gwl002 的帖子有何不同？