react native实现类似滚动选取效果

在React Native中实现类似滚动选择的效果，可以使用FlatList组件，并结合TouchableWithoutFeedback组件来处理点击事件。以下是一个简单的例子：

import React, { useState } from 'react';
import { FlatList, Text, TouchableWithoutFeedback, View } from 'react-native';
 
const App = () => {
  const [selectedItem, setSelectedItem] = useState(null);
  const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
 
  const renderItem = ({ item, index }) => {
    const isSelected = selectedItem === index;
    return (
      <TouchableWithoutFeedback onPress={() => setSelectedItem(index)}>
        <View style={{ backgroundColor: isSelected ? 'blue' : 'white', padding: 20, marginVertical: 5, borderColor: 'gray', borderWidth: 1 }}>
          <Text style={{ color: 'white' }}>{item}</Text>
        </View>
      </TouchableWithoutFeedback>
    );
  };
 
  return (
    <FlatList
      data={items}
      keyExtractor={(item, index) => index.toString()}
      renderItem={renderItem}
    />
  );
};
 
export default App;

在这个例子中，我们创建了一个名为App的函数组件，它使用了HookuseState来管理当前选中的项。items数组包含了要展示的数据。renderItem函数渲染每个列表项，并添加了一个TouchableWithoutFeedback组件来处理点击事件。点击后，setSelectedItem用来更新当前选中的项。每个列表项的背景颜色会根据其是否被选中而改变。