在 React Native 中显示来自数组的随机图像

Question

我是 React 和 React Native 的新手，在按下TouchableOpacity并调用我的函数displayRandomImage()时，我需要一些帮助来显示数组中的随机图像。

我得到的错误是

引用错误： 找不到变量：imgIndex

我尝试手动将数组索引设置为 0 或 1source={this.images[0].link}这很好用，但我无法弄清楚为什么imgIndex不被识别为随机数。

如果您能帮助我解决这个问题，我将非常高兴。请在下面找到组件代码。

export default class A extends React.Component {
constructor () { 
super();
this.state = {
showImageApa: false,
imgIndex: null,
};
}

images = [{link:require('./assets/apa.png')},{link:require('./assets/bil.png')} ];

displayRandomImage = () => {
this.setState({
imgIndex: Math.floor(Math.random() * 3)
});
this.setState({showImageApa: true});
setTimeout(() => {
this.setState({showImageApa: false});
}, 1000);
};

render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<LinearGradient
colors={['rgba(25,172,255,0.8)', 'cyan']}
style={{
position: 'absolute',
left: 0,
right: 0,
top: 0,
height: 800,
}}
/>
<Text style={styles.buttonTextTop}>MAX ABC</Text>
<Text style={styles.buttonTextVersion}>ver 0.2</Text>
{this.state.showImageApa &&
<View>
<Image 
style={styles.img}
source={this.images[0].link}/> 
<Text style={styles.buttonText}>Apa</Text>
</View>}
<TouchableOpacity
style={[styles.button]}
onPress={() => {this.displayRandomImage();}}>
<Text style={styles.buttonText}>A</Text>
</TouchableOpacity>

</View>
);
}
} 

Answer 1

如果 images数组中只有两个对象，则可以通过引用 images[0] 或images[1] 来寻址它们的位置。但是，当您使用Math.floor(Math.random * 3(函数时，它会返回值 [0， 2]，并且图像 [2] 上没有定义对象。因此，解决方案是将 Math.floor(Math.random *3( 更改为 Math.floor(Math.random *2(，以便返回的值为 0 或 1 以引用正确的索引。

祝你的 React Native 之旅好运！