在导航上发送道具 goBack [英] Send props on navigation goBack

问题描述

基本上我有三个屏幕，第一个是堆栈导航器:

Basically I have three screens, the first is a stack navigator:

const stackNav = createStackNavigator({
    Main: {
        screen: MainScreen,
        navigationOptions:({navigation}) => ({
            header: null,
        })
    },
    Detail: {
        screen: DetailScreen,
        navigationOptions: (props) => ({
            title: "Detail",
        })
    }
})

第二个我有一个按钮可以转到详细信息屏幕:

The second one I have a button to go to the Detail screen:

<TouchableOpacity onPress={() => this.props.navigation.navigate("Detail", {name: l.name, subtitle: l.subtitle})}>

最后一个只是信息，我想点击一个按钮并执行:this.props.navigation.goBack()，但是将道具发送到第二个屏幕(MainScreen)，一个 setState 和一个整数 id，我该怎么做?

The last one is just information, I would like to click a button and execute: this.props.navigation.goBack(), but sending props to the second screen (MainScreen), a setState and a integer id, how can I do that?

--使用参数编辑--

我在主屏幕中有这个功能:

I have this function in MainScreen:

handleOrdem(texto) {
    console.log('texto: '+texto)
    this.setState({
        param: global.ordemAtiva,
        ordemAtiva: !this.state.ordemAtiva
    });
}
//The onPress code:
onPress={() => this.props.navigation.navigate("Detail", {name: l.name, subtitle: l.subtitle, ordemFunc: () => this.handleOrdem()})}>

这就是我在 Detail.screen 中的称呼:

and this is how I call it in Detail.screen:

execBack(param){
    console.log('param: '+param);
    this.props.navigation.state.params.ordemFunc(param);
    this.props.navigation.goBack();
}
//Button to do it
onPress={() => this.execBack('test')}

推荐答案

在父屏幕中创建方法

returnData(){
    PERDROM_EVENT_WITH_RECEIVED_DATA
}

然后在执行导航代码时将这个方法returnData与导航代码绑定

Then bind this method returnData with navigation code while executing navigation code

this.props.navigation.navigate("Detail", {name: l.name, subtitle: l.subtitle , returnData: this.returnData.bind(this)})}

在调用 goBack()

this.props.navigation.state.params.returnData(RETURN_DATA_YOU_WANT);
this.props.navigation.goBack();

处理返回数据

假设您想要返回两个参数，然后在 returnData() 方法中添加两个参数

Suppose you want two parameters back then add two parms in returnData() method

例如我们取第一个参数是布尔值，第二个参数是字符串

For example we took first param is boolean and second param String

 returnData(flag,id){
    USE THIS `flag` and `id` to update state or method call or 
    What ever you wanted too.
}

并在子组件内部传递这两个参数

And inside Child component pass these two param

 this.props.navigation.state.params.returnData(VALUE_OF `flag`, Value of `id`);

使用参数进行编辑

用这一行替换你的导航代码

replace your code of navigation with this line

this.props.navigation.navigate("Detail", {name: l.name, subtitle: l.subtitle, ordemFunc: this.handleOrdem.bind(this)})>

你必须bind方法不能用箭头函数调用

You have to bind method not to call with arrow function

所以问题是

ordemFunc: () => this.handleOrdem()

用

ordemFunc: this.handleOrdem.bind(this)

这篇关于在导航上发送道具 goBack的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！