在反应本机中单击位于其外部的按钮时更改 Flatlist 的项目答案

【问题标题】：Change Item of Flatlist on click of button which is outside of it in react native在反应本机中单击位于其外部的按钮时更改 Flatlist 的项目
【发布时间】：2021-07-26 13:44:27
【问题描述】：

我有一组图像，可以使用FlatList 显示，当单击图像时，它也会以更大的尺寸显示在FlatList 之外。我在较大的图像旁边有一个左右图标，它应该用于显示当前图像中的下一个或上一个图像。

下面是我的代码：

const [selectedImage, setSelectedImage] = useState(img1);
const [imageSet, setImageSet] = useState([img1,img2,img3,img4]);
return (
<SafeAreaView>
    <View
          style={{height: 400,width: 100}}>
          <TouchableOpacity
            onPress={() => {
                //What should I do here
            }}>
            <Icon name={'chevron-left'} color={Colors.primary} size={54} />     // left press icon
          </TouchableOpacity>
          <Image style={{height: 350, width: 300}} source={selectedImage} />
          <TouchableOpacity
            onPress={() => {
                //What should I do here
            }}>
            <Icon name={'chevron-right'} color={Colors.primary} size={54} />     // right press icon    
          </TouchableOpacity>
        </View>
    <FlatList
    horizontal={true}
    showsHorizontalScrollIndicator={false}
    data={imageSet}
    renderItem={({item, index}) => (
        <View>
          <TouchableOpacity
              onPress={() => {
              setSelectedImage(item);
              }}>
                <Image
                source={item}
                key={index}
                style={{
                  width: 60,
                  height: 60,
                  resizeMode: 'contain',
                }}
              />
          </TouchableOpacity>
        </View>
    )}
    />
</SafeAreaView>
);

我无法弄清楚如何显示下一张或上一张图片。请帮忙。

【问题讨论】：

标签： react-native react-native-android react-native-ios react-native-flatlist

【解决方案1】：

您应该设置selectedImage 在imageSet 中拍摄下一张图像。唯一的问题是确定您在imageSet 数组中选择的图像。为此，您可以使用另一个状态变量。比如：

const [selectedImage, setSelectedImage] = useState(img1);
const [imageSet, setImageSet] = useState([img1,img2,img3,img4]);
const [indexImageSel, setIndexImageSel] = useState(0); //<-- 0 because the default value for selectedImage is img1

然后在FlatList TouchableOpacity 上存储选定的图像索引：

<TouchableOpacity
              onPress={() => {
              setSelectedImage(item);
              setIndexImageSel(index); // <-- store image index selected
              }}>
                <Image
                source={item}
                key={index}
                style={{
                  width: 60,
                  height: 60,
                  resizeMode: 'contain',
                }}
              />
          </TouchableOpacity>

然后是左右箭头的逻辑：

<View
          style={{height: 400,width: 100}}>
          <TouchableOpacity
            onPress={() => {
                //What should I do here? decrement index and set selectedImage
                let newIndex = (indexImageSel - 1) % imageSet.length;
                setSelectedImage(imageSet[newIndex]);
                setIndexImageSel(newIndex);
            }}>
            <Icon name={'chevron-left'} color={Colors.primary} size={54} />     // left press icon
          </TouchableOpacity>
          <Image style={{height: 350, width: 300}} source={selectedImage} />
          <TouchableOpacity
            onPress={() => {
                //What should I do here? increment index and set selectedImage
                let newIndex = (indexImageSel + 1) % imageSet.length;
                setSelectedImage(imageSet[newIndex]);
                setIndexImageSel(newIndex);
            }}>
            <Icon name={'chevron-right'} color={Colors.primary} size={54} />     // right press icon    
          </TouchableOpacity>
        </View>

【讨论】：