ReactNative踩坑日志——页面跳转之——Undefined is not an Object(evaluating this2.props.navigation.navigate)
2017-09-07 09:12
190 查看
页面跳转时,报 Undefined is not an Object(evaluating this2.props.navigation.navigate)
出错原因:在一个页面组件中调用了另一个组件,而跳转动作在被调用组件中定义。则会出现:当前呈现页面的this与跳转动作发生的this不一致,导致跳转动作不能被调用。
解决办法:在当前呈现页面获取跳转动作调用方法,作为参数传递给跳转动作发生组件。
例如:
在跳转动作发生组件中定义跳转:
出错原因:在一个页面组件中调用了另一个组件,而跳转动作在被调用组件中定义。则会出现:当前呈现页面的this与跳转动作发生的this不一致,导致跳转动作不能被调用。
解决办法:在当前呈现页面获取跳转动作调用方法,作为参数传递给跳转动作发生组件。
例如:
export default class PayFailedPage extends Component { render() { return ( <View style={{flex:1}}> <View style={{flex:1}}> <PageTop navigate={this.props.navigation.navigate}/></View> </View> ); } }
在跳转动作发生组件中定义跳转:
class PageTop extends Component{ render(){ return ( <View> <View> <Button onPress={()=>{ this.props.navigate('Index'); }} style={{flex:1}} title="回到首页"/> </View> </View> ); } }
相关文章推荐
- react-native统一入口界面,并实现页面的跳转
- 混合开发的大趋势之一React Native之页面跳转
- React Native之使用导航器跳转页面(react-navigation)
- 混合开发的大趋势之一React Native之页面跳转(2)+物理返回+特定平台代码
- ReactNative页面跳转Navigator
- RN(react native)入坑指南-07,使用navigator实现页面跳转
- 混合开发的大趋势之一React Native之页面跳转
- 混合开发的大趋势之一React Native之页面跳转(2)+物理返回+特定平台代码
- 《ReactNative实战讲义》React-native-router-flux框架篇---页面跳转与传值
- 第三章、ReactNative页面跳转
- react-native使用react-navigation进行页面跳转导航的示例
- ReactNative页面跳转Navigator
- ReactNative——页面跳转
- React-native页面跳转传值实现
- react-native 页面跳转与数据操作
- react-native 使用 StackNavigator 导航器跳转页面
- React-Native 之 GD (十)Android启动页面 及 模态方式跳转
- React-Native学习笔记之:导航器Navigator实现页面间跳转
- react-native使用react-navigation进行页面跳转导航
- React Native之ViewPagerAndroid跳转页面问题