位置是否有替代方案：'在 react-native 中很粘？答案

【问题标题】：Is there an alternative for position: 'sticky in react-native?位置是否有替代方案：'在 react-native 中很粘？
【发布时间】：2022-01-04 21:11:37
【问题描述】：

我试图让一个元素在任何时候都停留在屏幕的顶部，滚动时会出现这种情况。我发现position: 'sticky' 对常规 html 执行此操作。我想知道是否可以在我的 css 中添加一些东西，以使元素在使用 react-native 滚动时粘在一个地方。

【问题讨论】：

标签： javascript css react-native

【解决方案1】：

在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;

这个道具接受数组，所以你也可以通过传递所有组件的索引来设置多个粘性组件。

【讨论】：