我試圖讓一個元素一直停留在屏幕的頂部，即使是在滾動的時候。我發現這個位置:“sticky”對普通html來說是這樣的。我想知道是否可以在我的css中添加一些東西，使元素在使用react-native滾動時固定在一個地方。

在ScrollView上有一個道具叫做stickyHeaderIndices。傳遞你想粘在這個道具里的組件的索引。例如，如果您想從下面的代碼中將標題粘貼為粘性的，您只需在stickyHeaderIndices屬性中傳遞1，如下所示:

import React from 'react';
import { View, ScrollView, StyleSheet, Text } from 'react-native';

const App = () => {
  return (
    <ScrollView stickyHeaderIndices={[1]}>
      <View>
        <Text style={styles.overline}>
          Overline
        </Text>
      </View>
      <View>
        <Text style={styles.header}>
          Header
        </Text>
      </View>
      {/* Your others component goes here */}
    </ScrollView>
  )
}

const styles = StyleSheet.create({
  overline: {
    fontSize: 12,
    fontWeight: '100'
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold'
  },
  spacer: {
    height: 10,
  }
});

export default App;

這個屬性接受數組，所以您也可以通過傳遞所有組件的索引來設置多個粘性組件。

我發現ScrollView的stickyHeaderIndices不適合我的用例，因為我有一個非全屏的元素。(它將元素擴展到全屏；當我試圖將它包在一個視圖中時，它不再發粘。)

對我有用的是簡單地把我希望粘在ScrollView之前的元素放在里面，并應用絕對定位。類似的方法也適用于我的粘性頁腳。

<MyComponent style={{position: absolute;}}/> // will be sticky to top
<ScrollView> 
    // scrolling components
</ScrollView>
<OtherComponent /> // functionally sticky to bottom; looks like content is scrolling behind it, even though the scrollview just stops before it.