React Navigation 5.x 使用

简介

React Navigation 主要用于导航（StackNavigator），底部Tab导航（bottom-tabs），抽屉导航(drawer)

安装依赖

 // 安装react-navigation
yarn add @react-navigation/native
// 安装依赖库
yarn add react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

安装导航库

   //StackNavigator
   npm install @react-navigation/stack
   //TabNavigator
   npm install @react-navigation/bottom-tabs
   //DrawerNavigator
   npm install @react-navigation/drawer

StackNavigator 使用

引入组件

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

创建stack

    const Stack = createStackNavigator();
    
       
      
      
       
      
    

属性介绍

• name:Screen名称 导航用
• component:页面组件

导航

主要方法

• navigate('component'):函数大致意味着“转到这个屏幕”，如果你已经在那个屏幕上,则不会跳转
• push('component'): 和navigate不同之处在于始终会跳转到新的Screen,不能用它来回退到之前的Screen
• goBack():回到上一个界面
• popToTop():回到顶部
  ps: navigate()可以直接返回到当前栈中的任何一个Screen

export default class HomeScreen extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      
         this.props.navigation.navigate('Login',{name:"jack"})}>
          跳转登陆    
        
 
      
    )
  }
}

传递参数
navigate('component',参数对象)和push()方法可以传入第二个参数

navigation.navigate('Login',{name:"jack"})}

获取参数
通过route.params获取传递的参数

this.props.route.params.name

初始参数

TopBar样式

通过设置options定义样式,options可以是一个对象也可以是一个方法.

  const ops = {
    title:"标题",//标题
    headerStyle:{ //整个头部样式
      backgroundColor:'red'
    },
    headerTintColor:'blue',//标题和返回键颜色
    headerTitleStyle:{//标题样式
        fontSize:32,
        color:'black'
    },
    headerTitle: props => //自定义头部标题组件
  }
  function LogoTitle(){
    return (  
      
    )
  } 

如果需要统一样式则设置screenOptions

动态设置options属性

 this.props.navigation.setOptions({
       title: this.props.route.params.name
  })

通过route传递参数给options,

  const s = ({route})=>{return {title:route.params.name} } 
//options 为一个方法
  

设置TopBar左右两边的视图

• headerRight 设置顶部右边视图，headerLeft设置左边视图会覆盖掉返回按钮
• headerBackTitle,headerTruncatedBackTitle 设置返回文本
• headerBackImage 返回按钮图片

 const ops = {
    //....
    headerRight: () => ,//headerLeft
    
    //headerBackTitle:"返回",//
    //headerTruncatedBackTitle:"返回",
   // headerBackImage
  }
  function RightButton() {
    return (
      
         { alert('This is a button!') }}>
         { alert('This is a button2!') }}>
      
    )
  }

全屏导航

设置Navigator的mode属性为'modal',全屏导航在IOS中从底部弹出,这里将正常导航以新的组件形式添加,则不会影响之前的导航形式

HmoeStackScreen

  const Stack = createStackNavigator();
  return(
    
      
      
        
         
        }} />
    
  )