此篇教程会持续更新。。。
withNavigation是一个高阶组件,它可以将 navigation 这个 prop 传递到一个包装的组件。 当你无法直接将<code> navigation 这个 prop 传递给组件,或者不想在深度嵌套的子组件中传递它时,它将非常有用。
withNavigation (Component) 返回一个 Component。
就是当你一个页面里面含有自己封装的组件,并且你封装组件里面需要页面跳转的时候,这个时候就需要使用withNavigation,这个方法可以很方便的解决这个问题。这里提供两种方法,一种是使用withNavigation这个来实现,另一种是通过给包装组件传递props。
第一种(withNavigation):
1)首先在包装组件中导入withNavigation,导入方法:import {withNavigation} from ‘react-navigation’;
2)导出包装组件,导出方法:export default withNavigation(包装组件类名),由于这里使用了默认导出,所以在写组件类的时候不需要在前面加export default,直接class即可。
然后我们就可以像父组件一样实现页面跳转。
第二种(props):
1)在父组件中给子组件传递一个参数,参数名根据自己的需要进行命名,假如我们命名为:skip,然后将this.props.navigation.navigate传进去,也就是skip={this.props.navigation.navigate};
2)在包装组件中可以直接使用this.props.skip(‘需要跳转的路由(页面)’)。
这样就大功告成了。