在 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> 元件將佔用其餘空間。這是你應該放置應用程式的所有主要內容的地方。