react-navigation

简介

社区今后主推的方案是一个单独的导航库react-navigation，它的使用十分简单。React Navigation 中的视图是原生组件，同时用到了运行在原生线程上的Animated动画库，因而性能表现十分流畅。此外其动画形式和手势都非常便于定制。
英文官网
中文官网

安装

• 在项目目录执行

  npm install @react-navigation/native
  npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
  

• ios

  cd ios; pod install; cd ..
  

  注:确保已安装Cocoapods
• android
  在android/app/build.gradle中dependencies添加如下依赖

  implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
  implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
  

• 测试
  在app.js替换如下代码

  import 'react-native-gesture-handler';
  import * as React from 'react';
  import { NavigationContainer } from '@react-navigation/native';
  
  export default function App() {
    return (
      <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
    );
  }
  

  没有报错即为成功

简单使用

类似于android任务栈，RN同样存在

• 安装

  npm install @react-navigation/stack
  

• 屏幕切换

  navigation.navigate('RouteName')
  navigation.push('RouteName')
  navigation.goBack()
  navigation.popToTop()
  

  • navigate
    会判断栈中是否含有指定Route，如果有回到指定Route，如果没有会先创建
  • push
    创建一个Route进行压栈
  • goBack
    回到上一个Route
  • popToTop
    回到第一个Route
• 参数传递
  传递

  navigation.navigate('Details',{
      itemId: 86,
      otherParam: 'anything you want here',
  })
  

  获取

  const { itemId } = route.params;
  const { otherParam } = route.params;