Блог

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

Вот мой плоский список:

 <FlatList
  data={this.state.images}
  renderItem={this.renderGalleryImage}
  keyExtractor={(item, index) => index}
  horizontal={true}
/>;

renderGalleryImage = ({ item }) => {
  return <Image source={item} style={styles.moreImg} />;
};
  

и вот вид, в котором я хочу отобразить

 <View>
</View>
  

Вы можете подойти к этой проблеме несколькими способами; Самый простой способ — обернуть оператор renderGalleryImage return осязаемым примитивом и добавить onPress обработчик событий.

Вы можете использовать useState хук в тандеме, чтобы сохранить выбранное Image из плоского списка.

Вот пример фрагмента кода.

 const [selectedItem, setSelectedItem] = useState("");

renderGalleryImage = ({ item }) => {
  const setImage = () => setSelectedItem(item);
  return (
    <TouchableWithoutFeedBack onPress={() => setSelectedItem(item)}>
      <Image source={item} style={styles.moreImg} />;
    </TouchableWithoutFeedBack>
  );
};

return <View>{selectedItem amp;amp; <Image source={{ uri: selectedItem }} />}</View>;
  

Примечание: Если вы используете компоненты на основе классов, следуйте этому подходу:

 export default class App extends Component {
  state = {
    selectedImage: "",
  };

  renderGalleryImage = ({ item }) => {
    const setImage = () => this.setState({ selectedImage: item.image });
    return (
      <TouchableWithoutFeedback onPress={setImage} style={{ margin: 30 }}>
        <Image
          source={{ uri: item.image }}
          style={{ width: 100, height: 100 }}
        />
      </TouchableWithoutFeedback>
    );
  };

  render() {
    const renderImage = () => (
      <View>
        <Image
          source={{ uri: this.state.selectedImage }}
          style={{ width: 100, height: 100,borderColor:'red',borderWidth:1 }}
        />
      </View>
    );

    return (
      <View>
        <FlatList data={users} renderItem={this.renderGalleryImage} />;
        <Text>Selected Image</Text>
        {renderImage()}
      </View>
    );
  }
}
  

Вот ссылка на рабочую демонстрацию на Expo.