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

我试图做的是使用getParams和setParams将图像或数据发送到其他堆栈导航器

在GalleryScreen中，拾取的图像将设置为

pickedImage

状态，然后我

setParams

设置

pickedImage

状态，并将其传递给

导航（屏幕）的参数，{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>
    )
};

class GalleryScreen扩展了React.Component{
状态={
照片：[]，
索引：null，
PickeImage:空
};
setImageData=（）=>{
this.props.navigation.setParams（{submitImage:this.state.pickeImage}）；
}
getPhotos=（）=>{
CameraRoll.getPhotos({
第一：1000，
资产类型：“全部”，
groupTypes:“事件”
})
。然后（res=>{
这个.setState（{
照片：res.Edge，
});
})
.catch（（错误）=>{
log（'Error image:'+err）；
});
};
render（）{
返回(
{this.state.photos.map（（照片，索引）=>{
返回(
this.setState（{pickedImage:photos.node.image.uri}）
键={index}
参考底色=“透明”
>
);
})}
);
}     
}
GalleryScreen.navigationOptions=navData=>{
const submitFn=navData.navigation.getParam（'submitImage'）；
返回{
标题：“画廊”，
头型：{
paddingTop:20，
身高：75
},
头灯：（）=>(
{
navData.navigation.navigate（'EventInput'{
提交
})
}}
/>
)
};

})

EventInput.js：

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

render（）{
const getImage=this.props.navigation.getParam（'submitFn'）；
返回(
);
}

正确的方法是：

为GalleryScreen创建方法，该方法将负责导航到下一个屏幕，并传递带有已拾取图片的导航参数

使用

setParams

将此方法添加到导航参数，以便能够从标题调用它

从页眉处调用它

构造函数（道具）{
...
//将此方法传递给导航参数，以便能够从标头调用它
this.props.navigation.setParams（{goToEventInput:this.goToEventInput}）
}
//添加此方法
goToEventInput=（）=>{
this.props.navigation.navigate（'EventInput'，{image:this.state.pickeImage}）
}
//内部标题：调用方法
navData.getParam（'goToEventInput'）（））
/>

我尝试了您的代码，但没有导航到下一个屏幕？我的代码就是一个示例，让您更好地了解它应该如何工作。您需要自己进行调试，看看哪里出了问题：调用了哪些方法？项目是否有onPress道具？您是否在标题中收到goToEventInput参数？看看这个链接。首先将

this.props.navigation.setParams（{goToEventInput:this.goToEventInput}）

从构造函数移动到

componentDidMount

我已经尝试将

setParams

移动到

componentDidMount

中，但没有成功。正如我在RN的文档中所指出的，这是一个常见的错误。

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')())
/>