React-native

Question

我想创建一个可滚动的 FlatList 以 select 列表中只有一个项目。用户滚动列表后，selected 项目将成为彩色矩形（具有固定位置）中的项目，如您在此处所见：

实际上，即使经过一些研究，我也只能呈现基本的 FlatList。

你知道我该怎么做吗？

Answer 1

我找到了解决方案（但不是 FlatList）！

为此，我使用： https://github.com/veizz/react-native-picker-scrollview.

为了定义当前选中项的背景我在ScrollPicker[=]中添加了一个新的道具highLightBackgroundColor react-native-picker-scrollview 的索引文件中的 32=] :

render(){
    ...
    let highLightBackgroundColor = this.props.highLightBackgroundColor || '#FFFFFF';
    ...

    let highlightStyle = {
        ...
        backgroundColor: highLightBackgroundColor,
    };
    ...

使用方法：

<ScrollPicker
  ref={sp => {
    this.sp = sp;
  }}
  dataSource={['a', 'b', 'c', 'd', 'e']}
  selectedIndex={0}
  itemHeight={50}
  wrapperHeight={250}
  highLightBackgroundColor={'lightgreen'}
  renderItem={(data, index, isSelected) => {
    return (
      <View>
        <Text>{data}</Text>
      </View>
    );
  }}
  onValueChange={(data, selectedIndex) => {
    //
  }}
/>

没有其他自定义的情况：

Answer 2

您可以使用非常流行的 react-native-snap-carousel package, using the vertical prop 实现相同的设置。不需要为此使用更小、更差的 documented/unmaintained 包。

React-native - 如何创建一个可滚动的平面列表，其中所选项目位于中间？

React-native - How to create a scrollable flatList in which the chosen item is the one at the middle?

react-native-flatlist