Отображение случайного изображения из массива в React Native

Question

Я новичок в React & React Native, и мне понадобится помощь с отображением случайных изображений из массива при нажатии TouchableOpacity и вызове моей функции displayRandomImage().

Я получаю ошибку

ReferenceError: Не удается найти переменную: imgIndex

Я попытался вручную установить индекс массива на 0 или 1 source={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!