在 React Native 中单击位于其外部的按钮时更改 Flatlist 的项目

Question

我有一组图像，我可以使用 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>
);

我不知道如何显示下一张或上一张图片。请帮忙。

Answer 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>

在 React Native 中单击位于其外部的按钮时更改 Flatlist 的项目

Change Item of Flatlist on click of button which is outside of it in react native

react-native

react-native-android

react-native-ios

react-native-flatlist