React-native - Как создать прокручиваемый плоский список, в котором выбранный элемент находится посередине?

Question

Я хотел бы создать прокручиваемый FlatList, чтобы выбрать только один элемент из списка. После того, как пользователь прокрутит список, выбранный элемент будет отображаться в цветном прямоугольнике (который имеет фиксированную позицию), как вы можете видеть здесь:

На самом деле я могу отобразить только c FlatList даже после некоторых исследований.

Ты знаешь, как мне это сделать?

Answer 1

Я нашел решение (но это не FlatList)!

Для этого я использую: https://github.com/veizz/react-native-picker-scrollview.

Чтобы определить фон текущего выбранные элементы I добавлено новый реквизит highLightBackgroundColor в ScrollPicker Class в индексном файле response-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) => {
    //
  }}
/>

Как это выглядит без других настроек: