Question

目标是不使用React Redux将照片的状态从我的CameraRoll.js（模态）传递到EventCreator.js（模态）。我正在使用React Native Navigation V1。

我想知道photos: []的状态有可能成为道具吗？只是不知道该怎么做。需要帮助，谢谢大家！

这是我的代码：

CameraRoll.js：

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

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={{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>
  </View>
);
}

EventCreator.js：

render(){
 return(
       <View style={styles.container}>
        <EventInput
          titleOnChangeText={this.eventNameChangedHandler}
          descriptionOnChangeText={this.eventDescriptionChangedHandler}
          titleEvent={this.state.controls.eventName}
          descriptionEvent={this.state.controls.eventDescription}
        />
        <Image
          style={styles.image}
          source={"I want to pass the image here from CameraRoll.js"}
          resizeMode='contain'
        />
      </View>
 );
}

Answer 1

如果您是这个意思：

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

它只是更改状态值。您应该做的是在cameraRoll.js的返回值上放置一个if语句：

private onPress = (img) => {
    this.props.onImagePicked(img)
}
render() {
return(
  <View style={styles.container}>
    <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.onPress(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>
  </View>
);
}

在EventCreator.js中：

constructor(){
    super(props);
    this.state = {
        pickedImg: undefined
    }
}

private onImagePicked = (newImg) => {
    this.setState({
        pickedImg: newImg
    })
}

render(){
 return(
       <View style={styles.container}>
        <EventInput
          titleOnChangeText={this.eventNameChangedHandler}
          descriptionOnChangeText={this.eventDescriptionChangedHandler}
          titleEvent={this.state.controls.eventName}
          descriptionEvent={this.state.controls.eventDescription}
        />
        <Image
          style={styles.image}
          source={this.props.source}
          resizeMode='contain'
        />
      <CameraRoll props={...} onImagePicked={this.onImagePicked}/>
      </View>
 );
}

React Native-如何在不使用React Redux的情况下从其他组件传递图像

1 个答案: