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();
    <NavigationContainer>
      <Stack.Navigator  initialRouteName = "Home"  
      > 
      <Stack.Screen name="Home"  component={HomeScreen} />
      <Stack.Screen  name="Login"  component={LoginScreen}   }
         />
      <Stack.Screen name="List" component={ListScreen}/> 
      </Stack.Navigator>
    </NavigationContainer>

属性介绍

• 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 (
      <View style={style.rootView} onLayout={this.onLayout}>
        <TouchableOpacity  onPress={() => this.props.navigation.navigate('Login',{name:"jack"})}>
          <Text >跳转登陆</Text>    
        </TouchableOpacity>
 
      </View>
    )
  }
}

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

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

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

this.props.route.params.name

初始参数

      <Stack.Screen  name="Login"  component={LoginScreen}  initialParams={{name:"初始名称"}}
         />

TopBar样式

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

  const ops = {
    title:"标题",//标题
    headerStyle:{ //整个头部样式
      backgroundColor:'red'
    },
    headerTintColor:'blue',//标题和返回键颜色
    headerTitleStyle:{//标题样式
        fontSize:32,
        color:'black'
    },
    headerTitle: props => <LogoTitle {...props} />//自定义头部标题组件
  }
  function LogoTitle(){
    return (  
      <Image
      style={{29,height:23}}
      source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}
    />
    )
  } 
<Stack.Screen  name="Login"  component={LoginScreen} options={ops} />

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

<Stack.Navigator initialRouteName="Home" screenOptions={scrOptions}
      >

动态设置options属性

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

通过route传递参数给options,

  const s = ({route})=>{return {title:route.params.name} } 
//options 为一个方法
  <Stack.Screen  name="Login"  component={LoginScreen} options={s} />

设置TopBar左右两边的视图

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

 const ops = {
    //....
    headerRight: () => <RightButton />,//headerLeft
    
    //headerBackTitle:"返回",//
    //headerTruncatedBackTitle:"返回",
   // headerBackImage
  }
  function RightButton() {
    return (
      <View style={{ flexDirection: 'row',justifyContent:'center' }}>
        <Button style={{color:'red'}} title="右" onPress={() => { alert('This is a button!') }}></Button>
        <Button title="右2" onPress={() => { alert('This is a button2!') }}></Button>
      </View>
    )
  }

全屏导航

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

      <RootStack.Navigator mode="modal" screenOptions={{headerShown:false}}>
      
        <RootStack.Screen name="Home" component={HmoeStackScreen} />
        <RootStack.Screen name="Modal" component={ModalScreen}/>
      </RootStack.Navigator>

HmoeStackScreen

  const Stack = createStackNavigator();
  return(
    <Stack.Navigator  initialRouteName="Home" screenOptions={scrOptions}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Login" component={LoginScreen} options={ops} />
      <Stack.Screen name="List"   component={ListScreen} options={{ headerTitle: props => <LogoTitle {...props} /> 
         
        }} />
    </Stack.Navigator>
  )