在 React Native 应用中添加固定页脚功能

粘性页脚是 Web 应用程序的常见功能。通常 React 开发人员需要实现粘性页脚，但不知道如何实现。

如果你想在 React Native 中重新创建相同的功能，请阅读本指南直到最后。

React Native 的核心组件是基于原生组件的，所以它们的功能不同，接受的属性也不同。本文将探讨如何在 React 中设置粘性页脚。

在 React Native 中使用 Position CSS 属性创建粘滞页脚

要在 React Native 中使用此功能，你将需要 <View> 和 <ScrollView> 核心组件。在这种情况下，我们可以使用 <View> 组件作为容器。

它接受 style 属性，你必须将其设置为 display: flex。在这个容器中，你必须有一个 <ScrollView> 组件，它将包含应用程序中的所有其他 UI，以及另一个 <View> 组件，它将作为粘性页脚。

这是一个简单的例子。

<View style={{flex: 1}}>
  <ScrollView><Text>This should contain main contents of the page</Text></ScrollView>
  <View><Text>Content for sticky footer</Text></View>
</View>

此解决方案使用 <ScrollView> 核心组件及其行为。

<ScrollView> 组件的默认行为是占用其容器中垂直可用的所有可用空间。在这个例子中，<View> 组件的第二个子元素是另一个 <View>。

如果你完全在示例中重新创建组件结构，你将有两个子组件。第二个 <View> 子元素将是一个粘性页脚，因为即使用户向下滚动它也会保持可见。

它的高度将由它的内容决定，因为它会根据需要占用尽可能多的空间。或者，你也可以设置此页脚的特定高度。

第一个 <ScrollView> 组件将占用其余空间。这是你应该放置应用程序的所有主要内容的地方。