position: 'sticky in react-native 有替代品嗎？

Question

我試圖讓一個元素在任何時候都停留在屏幕的頂部，滾動時很容易。 我發現position: 'sticky'對常規 html 執行此操作。 我想知道是否可以在我的 css 中添加一些東西，以使元素在使用 react-native 滾動時粘在一個地方。

Answer 1

在ScrollView上有一個名為stickyHeaderIndices的道具。 在這個道具中傳遞你想要粘的組件的索引。 例如，如果您想從下面的代碼中將 header 粘貼為粘性，則只需在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;

該道具接受數組，因此您還可以通過傳遞所有組件的索引來設置多個粘性組件。