在react native中，当点击Flatlist外部的按钮时，改变它的Item

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 

然后在FlatListTouchableOpacity上存储选定的图像索引:

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