Блог

Главная - Вопросы по программированию - Похоже, не удается получить журнал моей консоли для регистрации индекса изображения при нажатии на изображение

Похоже, не удается получить журнал моей консоли для регистрации индекса изображения при нажатии на изображение

#javascript #react-native #onpress

#javascript #react-native #onpress

Вопрос:

У меня есть изображения, поступающие из переменной массива в <Image> внутри <View> , которые отображаются в пространстве между моей навигацией. Везде, где я помещаю свой журнал консоли, он регистрирует номер индекса каждого изображения при загрузке, и я не могу нажать на изображение, чтобы запустить журнал консоли.

Я переместил onPress={console.log(index)} в возможные области, надеясь, что это сделает изображения интерактивными.

 import React, { Component } from 'react';
import { View, Dimensions, Image } from 'react-native';

var images = [
  require('../assets/IMG-0028.jpeg'),
  require('../assets/IMG-0048.jpeg'),
  require('../assets/IMG-0064.jpeg'),
  require('../assets/IMG-0089.jpeg'),
  require('../assets/IMG-0119.jpeg'),
  require('../assets/IMG-0151.jpeg'),
  require('../assets/IMG-0152.jpeg'),
  require('../assets/IMG-0153.jpeg'),
  require('../assets/IMG-0154.jpeg'),
  require('../assets/IMG-0155.jpeg'),
  require('../assets/IMG-0184.jpeg'),
  require('../assets/IMG-0221.jpeg'),
  require('../assets/IMG-0268.jpeg'),
  require('../assets/IMG-0309.jpeg'),
  require('../assets/IMG-0320.jpeg'),
  require('../assets/IMG-0474.jpeg'),
  require('../assets/IMG-0707.jpeg'),
  require('../assets/IMG-0860.jpeg')
];
var { width, height } = Dimensions.get('window');

class CardComponent extends Component {
  renderHome = () => {
    return images.map((image, index) => {
      return (
        <View
          key={index}
          style={[
            { width: width / 3 },
            { height: height / 3 },
            { marginBottom: 2 },
            index % 3 !== 0 ? { paddingLeft: 2 } : { paddingLeft: 0 }
          ]}
        >
          <Image
            style={{ flex: 1, width: undefined, height: undefined }}
            source={image}
            onPress={console.log(index)}
          />
        </View>
      );
    });
  };
  render() {
    return (
      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
        {this.renderHome()}
      </View>
    );
  }
}
export default CardComponent;

Я ожидаю нажать на изображение и заставить консоль регистрировать индекс изображения, чтобы я знал, что это работает.

но.. Вообще ничего не происходит.

Комментарии:

1. Атрибуты события ожидают ссылку на функцию, однако вы немедленно выполняете функцию, поэтому атрибут просто получает возвращаемое значение, неопределенное в случае log() . Вы, вероятно, имели в виду использовать там функцию стрелки onPress={()=>console.log()}

2. Это делает так, что он не запускается сразу, спасибо. Похоже, что это вообще не срабатывает, независимо от того, что я нажимаю.

3. Хорошо, я смог заставить каждое изображение мигать из-за осязаемой непрозрачности по всему виду.

4. Хорошо, я выполнил все, что намеревался выполнить с этим вопросом. Спасибо за помощь.