D0 我如何使 flistList 可点击以及我如何确切知道点击了哪个项目答案

【问题标题】：how D0 I make the flistList clickable and how Do I know exactly which Item had clickedD0 我如何使 flistList 可点击以及我如何确切知道点击了哪个项目
【发布时间】：2021-05-12 23:04:19
【问题描述】：

D0 我如何使 flistList 可点击以及我如何确切知道哪个项目已单击，例如当用户单击第一个元素时想向他展示图像数组，如果他单击元素编号 2 我将向他展示另一个元素数组

        <View onPress={()=>alert("")}>
            <FlatList 
                vertical={true}
                showsVerticalScrollIndicator={false}
                data={imgs}
                keyExtractor={(images) => images.name}
                renderItem={({ item, index }) => (
                    <Image source={item.img}
                        key={index}
                        style={{
                            width: Dimensions.get('window').width / 2,
                            height: 300,
                            borderWidth: 5,
                            borderColor: "red",
                            margin: 4
                        }}
                    />
                )}
            />
        </View>
    </Block>

【问题讨论】：

标签： reactjs react-native react-redux react-navigation

【解决方案1】：

只需创建一个新的 react 组件，该组件将具有您要在其中呈现平面列表中的每个项目的结构，并在该组件内部，在其 render() 实例内，将所有内容包装在 TouchableOpacity 内，该组件具有 onPress 属性当用户单击项目时，您可以在其中设置所需的内容。然后，在您的主组件中，在 FlatList 的 renderItem 属性中，将您要渲染的每个项目映射到创建的新反应组件。

【讨论】：

【解决方案2】：

<FlatList 
      vertical={true}
      showsVerticalScrollIndicator={false}
      data={imgs}
      keyExtractor={(images) => images.name}
      renderItem={({ item, index }) => (
     <Pressable onPress={()=> alert('Item you clicked', item)}>
        <Image source={item.img}
               key={index}
               style={{width: Dimensions.get('window').width / 2,
                       height: 300,
                       borderWidth: 5,
                       borderColor: "red",
                       margin: 4
                        }}
                    />
      </Pressable>
       )}
   />

使用这个 sn-p。分析一下。

【讨论】：