React Native - Как показать одно конкретное изображение с камеры Roll с помощью TouchableHighlights - PullRequest
Новая
       20

React Native - Как показать одно конкретное изображение с камеры Roll с помощью TouchableHighlights

1 голос
/ 26 июня 2019

Моя цель - показывать изображение в этом пустом пространстве при каждом касании (TouchableHighlight) от CameraRoll до <Image/>. Я не могу найти учебник, чтобы сделать это, и у меня мало знаний о JavaScript, поэтому я решил задать вопрос в Stack Overflow.

Я просто хочу, чтобы идея достигла этой цели. Спасибо, ребята!

Это изображение, которое нужно понять, оно больше похоже на Instagram.

enter image description here

Вот мои коды: 

state = {
photos: [],
 index: null,
 pickedImage: null
}

componentDidMount() {
 requestExternalStoragePermission();
 this.getPhotos();
};

setIndex = (index) => {
if (index === this.state.index) {
  index = null
}
this.setState({ index })
};

getPhotos = () => {
CameraRoll.getPhotos({
  first: 200,
  assetType: 'All'
})
.then(res => {
  this.setState({ 
    photos: res.edges,
  });
})
.catch((err) => {
  console.log('Error image: ' + err);
});
};

render() {
return(
  <View style={styles.container}>
    <Image source={this.state.index} style={styles.image}/>
    <ScrollView contentContainerStyle={styles.scrollView} showsVerticalScrollIndicator={false}>
      {this.state.photos.map((photos, index) => {
        return(
            <TouchableHighlight 
              style={{opacity: index === this.state.index ? .5 : 1}}
              onPress={() => this.setIndex(index)}
              key={index}
              underlayColor='transparent'
            >
              <Image
                style={{width: width / 3, height: width /3}}
                source={{uri: photos.node.image.uri}}
                resizeMode='cover'
              />
            </TouchableHighlight>
        );
      })}
    </ScrollView>
  </View>
);
}

1 Ответ

1 голос
/ 26 июня 2019

Прежде всего, синтаксис, который вы используете <Image source={this.state.index} style={styles.image}/>, это НЕПРАВИЛЬНО должно быть как <Image source={{uri : this.state.pickedImage}} style={styles.image}/>

в вашем штате изначально есть 3 значения 

state = {
photos: [],
 index: null,
 pickedImage: null
}

при нажатии кнопки <TouchableHighlight/> вы сохраняете индекс изображения, которое щелкнули, в состояние и передаете этот индекс в компоненте Image. Этого недостаточно для отображения изображения

Решение

сначала вы должны сохранить изображение, которое вы щелкнули, чтобы заявить, выполнив 

onPress={() => this. setState({pickedImage: photos.node.image.uri})}

консольный журнал this.state.pickedImage даст вам URI к изображению

и передать этот URI компоненту Image 

<Image source={{uri : this.state.pickedImage}} style={styles.image}/>

Окончательный код выглядит как 

<ScrollView contentContainerStyle={styles.scrollView} showsVerticalScrollIndicator={false}>
  {this.state.photos.map((photos, index) => {
    return(
        <TouchableHighlight 
          style={{opacity: index === this.state.index ? .5 : 1}}
          onPress={() => this. setState({pickedImage: photos.node.image.uri})}
          key={index}
          underlayColor='transparent'
        >
          <Image
            style={{width: width / 3, height: width /3}}
            source={{uri: photos.node.image.uri}}
            resizeMode='cover'
          />
        </TouchableHighlight>
    );
  })}
</ScrollView>



<Image source={{uri : this.state.pickedImage}} style={styles.image}/>
...