使用setParam和getParam在React导航中传递数据

Question

我想做的是使用getParams和setParams将图像或数据发送到其他Stack Navigator。

在GalleryScreen中，选择的图像将设置为pickedImage状态，然后我将setParams设置为pickedImage状态，并将其传递给navigate(screen), {here}的参数。然后在另一个屏幕上，我getParam(submitFn)然后传递到我的Image source={getImage}

我认为我出了错是setImageData部分，因为我认为这不会触发setParams吗？

GalleryScreen.js：

class GalleryScreen extends React.Component {
  state = {
    photos: [],
    index: null,
    pickedImage: null
  };

  setImageData = () => {
    this.props.navigation.setParams({submitImage: this.state.pickedImage});
  }


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

  render() {
    return (
        <View style={styles.container}>
            <StatusBar backgroundColor="white"/>
            <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>
    );
  }     

}

GalleryScreen.navigationOptions = navData => {
const submitFn = navData.navigation.getParam('submitImage');
return {
    headerTitle: 'Gallery',
    headerStyle: {
        paddingTop: 20,
        height: 75
    },
    headerRight: () => (
        <HeaderButtons HeaderButtonComponent={HeaderButton}>
            <Item
                // title="Cart"
                iconName="md-arrow-forward"
                onPress={() => {
                    navData.navigation.navigate('EventInput', {
                        submitFn
                    })
                }}
            />
        </HeaderButtons>
    )
};

};

EventInput.js：

render(){
  const getImage = this.props.navigation.getParam('submitFn');
  return (
    <Image source={{uri: getImage}} style={styles.image}/>
  );
}

Answer 1

正确的方法是：

1. 用于GalleryScreen的创建方法，它将负责导航到下一个屏幕并传递带有已拾取图片的导航参数
2. 将此方法添加到带有setParams的导航参数中，以便能够从标题中调用它
3. 从标题中调用

。

constructor(props) {
  ...
  // pass this method to navigation params to be able to call it from header
  this.props.navigation.setParams({ goToEventInput: this.goToEventInput })
}

// add this method
goToEventInput = () => {
  this.props.navigation.navigate('EventInput', { image: this.state.pickedImage })
}

// inside header: call the method
<Item
  iconName="md-arrow-forward"
  onPress={() => navData.getParam('goToEventInput')())
/>