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>
);

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

标签： react-nativereact-native-androidreact-native-iosreact-native-flatlist

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>