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

Question

我想创建一个可滚动的FlatList以在列表中仅选择一项。用户滚动列表后，所选项目将是彩色矩形（位置固定）中的一项，如您在此处看到的：

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

你知道我应该怎么做吗？

Answer 1

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

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

为定义当前所选项目的背景，我添加了在react-的索引文件中的 ScrollPicker类中的新道具 highLightBackgroundColor native-picker-scrollview：

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) => {
    //
  }}
/>

未经其他自定义的外观：