时间戳

首页 > 解决方案 > 在导航 goBack 上发送道具

react-native - 在导航 goBack 上发送道具

问题描述

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

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()，但是将道具发送到第二个屏幕（MainScreen），一个setState和一个整数id，我该怎么做？

--用参数编辑--

我在 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 中的称呼：

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')}

标签： react-nativereact-navigation

解决方案

在父屏幕中创建方法

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()方法中添加两个参数

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

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

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

 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)

推荐阅读