React Navigation基本使用

前言

本文内容参考自官方Api文档,也只讲了最基础的使用。如需更深了解请移步至react-navigation

依赖安装

yarn add @react-navigation/native
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
yarn add @react-navigation/stack

注：从React Native 0.60及更高版本开始，链接是自动的。不用运行react-native link。

使用

路由跳转

// In App.js in a new project

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen ({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>首页</Text>
      <Button title="跳转到详情" onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}
function DetailsScreen ({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>详情页</Text>
      <Button title="打开新的详情页面" onPress={() => navigation.push('Details')}
      />
      <Button title="跳转到首页" onPress={() => navigation.navigate('Home')} />
      <Button title="返回上一级" onPress={() => navigation.goBack()} />
      <Button title="返回顶级页面" onPress={() => navigation.popToTop()}
      />
    </View>
  );
}

const Stack = createStackNavigator();

function App () {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        {/* 此处第一个页面为顶级页面,默认会首先展示 */}
        <Stack.Screen name="Home" component={HomeScreen} options={{ title: '首页标题' }} />
        <Stack.Screen name="Details" component={DetailsScreen} options={{ title: '详情标题' }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

1.navigation.navigate('xxxx')跳转到指定页面。如果页面在堆栈中，则关闭当前页并跳转过去。如果当前页面即为要跳转的页面，则会无反应。

2.navigation.push('xxxx')向堆栈中插入页面，不管页面是否已存在于堆栈。

3.navigation.goBack()返回上一级

4.navigation.popToTop()返回顶级页面

路由传参

传递参数

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

接受参数

function DetailsScreen({ route }) {
// 接收参数
  const { itemId, otherParam } = route.params;
  return (
    <View>
    ...
    </View>
  );
}

设置默认参数

<Stack.Screen
  name="Details"
  component={DetailsScreen}
  initialParams={{ itemId: 42 }}
/>

路由头（导航头）设置

导航头基本配置

<Stack.Screen name="Details" component={DetailsScreen} options=
  {{
  	headerShown: true // 是否显示头部导航栏，默认为true
	title: '详情页', // 导航标题
	headerStyle: {
		backgroundColor: '#f4511e', // 导航栏背景色
	},
	headerTintColor: '#fff',// 导航文字颜色
	headerTitleStyle: {
		fontWeight: 'bold', // 导航文字加粗
		fontSize: 15 // 导航文字大小
	}
  }}
/>

动态设置导航头

navigation.setOptions({ title: 'Updated!' })

自定义导航头

function LogoTitle() {
  return (
    <Image
      style={{ width: 50, height: 50 }}
      source={require('@expo/snack-static/react-native-logo.png')}
    />
  );
}
function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerTitle: props => <LogoTitle {...props} /> }}
      />
    </Stack.Navigator>
  );
}

自定义导航头按钮

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerRight: () => (
            <Button
              onPress={() => alert('This is a button!')}
              title="右边按钮"
              color="#fff"
            />
          ),
        }}
      />
    </Stack.Navigator>
  );
}

底部的Tab导航

依赖安装

yarn add @react-navigation/bottom-tabs

基本使用

// in your RootPage.js
import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
// 有三个tab页
import HomePage from '../page/HomePage';
import ListPage from '../page/ListPage'
import MyPage from '../page/MyPage'

const Tab = createBottomTabNavigator();
export default function TabNav () {
  return (
    <Tab.Navigator
      tabBarOptions={{
        activeTintColor: 'tomato', // tab选中时颜色
        inactiveTintColor: 'gray' // tab没选中时颜色
      }}
    >
      <Tab.Screen name="Home" component={HomePage} />
      <Tab.Screen name="List" component={ListPage} />
      <Tab.Screen name="MyCenter" component={MyPage} />
    </Tab.Navigator>
  );
}

// in your App.js
import * as React from 'react';
import { NavigationContainer, getFocusedRouteNameFromRoute } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
// 引入tab页和一个其他页面
import TabNav from './RootPage/RootPage'
import Details from './page/Details'
const Stack = createStackNavigator();
// 在Tab.Navigator中修改父级headerTitle,需用此种方式
function getHeaderTitle (route) {
  const routeName = getFocusedRouteNameFromRoute(route) ?? 'Home';
  switch (routeName) {
    case 'Home':
      return '首页';
    case 'List':
      return '列表';
    case 'MyCenter':
      return '个人中心';
  }
}
function App () {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="TabNav" component={TabNav} options={({ route }) => ({
          headerTitle: getHeaderTitle(route)
        })} />
        <Stack.Screen name="Details" component={Details} options={{ title: '详情', headerShown: false }} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}
export default App;

。。。 待续