React Navigation 实践总结

这篇文章主要是针对React Navigation 的实践讲解，因为本人在初学React-native 的时候，基本的组件，布局这些都是最基础的点，可以在以后慢慢练习掌握就可以了，所以我从交互和网络开始着手练习react-native。

一开始搭建环境我就不说了，可以参照react-native 中文网 进行环境搭建。但有点坑的是，react-native 中文网好像不知道从什么时候停止更新了，如果你从头到尾都参照这个网站去学习可能会遇到很多坑，要知道爬坑可是很痛苦的一件事。所以我建议还是去官网对照学习。虽然英文看上去有一些不习惯，但慢慢的就好了。

本人demo中的版本是最新版3.9.1，react-native 版本也为最新版。

image.png

首先我说一下React [email protected]之后，最低需要[email protected]，如果你的react-native版本过低，node_modules就会一直红屏报错，显示需要安装各种依赖包，当你装完一个有一个的依赖包还是报错的话，不妨查看一下本地react-native 和React Navigation 的版本，还有你的node版本最好在10.0以上。

node -v
react-native -v

接下来创建一个项目

react-native init MyReact

安装依赖：

yarn add react-navigation
yarn add react-native-gesture-handler
react-native link react-native-gesture-handle

跑起来：

npm start

接下来打开项目，从app.js开始着手，写两个Component，用于跳转。

class HomeScreen extends React.Component{
  render(){
    
      HomeScreen 
      this.props.navigation.navigate('Detail')}
     title = 'Go to Detail'/>
     
  }
}

class DetailScreen extends React.Component{
  render(){
    
      this.props.navigation.goBack()}
     />
      
  }

创建一个导航器：

const AppNavigator =  createStackNavigator(
  {
  Home: {screen: HomeScreen},
  Detail: {screen: DetailScreen}
},

放入一个APP容器

 export default createAppContainer(AppNavigator);

运行代码：

image.png

image.png

这样，就能成功的跳转利用React Navigation 进行跳转，当然这只最简单的用法，Demo 里面会涉及到一些传参， 自定义导航按钮和样式，以及关联属性等。

demo地址 希望对您有所帮助。