在导航 goBack 上发送道具

2024-03-13

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

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

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

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

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

--使用参数编辑--

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

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 中的调用方式:

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执行导航代码时使用导​​航代码

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

在子组件调用中returnData调用之前的方法goBack()

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

处理返回数据

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

例如,我们采用第一个参数是布尔值,第二个参数是字符串

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

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

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

用于使用参数进行编辑

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

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

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

所以问题是

ordemFunc: () => this.handleOrdem()

将此行替换为

ordemFunc: this.handleOrdem.bind(this)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在导航 goBack 上发送道具 的相关文章

随机推荐