Блог

У меня есть массив изображений , которые я могу отображать с помощью 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>
);
 

Я не могу понять, как отобразить следующее или предыдущее изображение . Пожалуйста, помогите.

Вы должны настроить 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>