Gui*_*osa 3 react-native react-navigation
基本上我有三个屏幕,第一个是堆栈导航器:
const stackNav = createStackNavigator({
Main: {
screen: MainScreen,
navigationOptions:({navigation}) => ({
header: null,
})
},
Detail: {
screen: DetailScreen,
navigationOptions: (props) => ({
title: "Detail",
})
}
})
Run Code Online (Sandbox Code Playgroud)
第二个我有一个按钮可以转到详细信息屏幕:
<TouchableOpacity onPress={() => this.props.navigation.navigate("Detail", {name: l.name, subtitle: l.subtitle})}>
Run Code Online (Sandbox Code Playgroud)
最后一个只是信息,我想单击一个按钮并执行:
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()})}>
Run Code Online (Sandbox Code Playgroud)
这就是我在 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')}
Run Code Online (Sandbox Code Playgroud)
在父屏幕中创建方法
returnData(){
PERDROM_EVENT_WITH_RECEIVED_DATA
}
Run Code Online (Sandbox Code Playgroud)
然后returnData在执行导航代码的同时将此方法与导航代码绑定
this.props.navigation.navigate("Detail", {name: l.name, subtitle: l.subtitle , returnData: this.returnData.bind(this)})}
Run Code Online (Sandbox Code Playgroud)
在调用returnData之前的子组件调用方法中goBack()
this.props.navigation.state.params.returnData(RETURN_DATA_YOU_WANT);
this.props.navigation.goBack();
Run Code Online (Sandbox Code Playgroud)
处理返回数据
假设你想要两个参数然后在returnData()方法中添加两个参数
例如,我们取第一个参数是布尔值,第二个参数是字符串
returnData(flag,id){
USE THIS `flag` and `id` to update state or method call or
What ever you wanted too.
}
Run Code Online (Sandbox Code Playgroud)
并在 Child 组件内部传递这两个参数
this.props.navigation.state.params.returnData(VALUE_OF `flag`, Value of `id`);
Run Code Online (Sandbox Code Playgroud)
使用参数进行编辑
用这一行替换你的导航代码
this.props.navigation.navigate("Detail", {name: l.name, subtitle: l.subtitle, ordemFunc: this.handleOrdem.bind(this)})>
Run Code Online (Sandbox Code Playgroud)
你必须bind方法不使用箭头函数调用
所以问题是
ordemFunc: () => this.handleOrdem()
Run Code Online (Sandbox Code Playgroud)
将此行替换为
ordemFunc: this.handleOrdem.bind(this)
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
9219 次 |
| 最近记录: |