004.react-navigation使用(一)：堆栈式导航器&底部标签导航器

• 文档地址

  https://reactnavigation.org/docs/getting-started/

• 安装

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

• ios无法自动连接需要配置

cd ios 
pod install

• android配置

配置react-native-gesture-handler
在android目录下的MainActivity 中
package com.swmansion.gesturehandler.react.example;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

在app下的build.gradle中：
implementation 'androidx.appcompat:appcompat:1.2.0'

• 在项目的跟目录index.js中添加

import 'react-native-gesture-handler';

堆栈式导航器

• 安装堆栈式导航器

yarn add @react-navigation/stack

• 创建页面和路由

• 主页面Home

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
import { RootStackNavigation } from '@/navigator/index'

type IProps = {
    navigation: RootStackNavigation
}
class Home extends Component<IProps> {
    onPress = () => {
        const { navigation } = this.props
        navigation.navigate("Detail", { id: 18 })
    }
    render() {
        return (
            <View>
                <Text>首页</Text>
                <Button title='跳转详情页' onPress={this.onPress}></Button>
            </View>
        );
    }
}

export default Home;

• 详情页面Detail

import { RootStackParamList } from '@/navigator/index';
import { RouteProp } from '@react-navigation/native';
import React, { Component } from 'react';
import { View, Text } from 'react-native';

type Iprops = {
    route: RouteProp<RootStackParamList, 'Detail'>
}

class Detail extends Component<Iprops> {
    render() {
        const { route } = this.props
        return (
            <View>
                <Text>Detail</Text>
                {/* 获取首页得到的参数 */}
                <Text>{route.params.id}</Text>
            </View>
        );
    }
}

export default Detail;

• navgatior导航控制

import React, { Component } from 'react';
import { NavigationContainer } from '@react-navigation/native'
import { CardStyleInterpolators, createStackNavigator, HeaderStyleInterpolators, StackNavigationProp } from '@react-navigation/stack'
import Home from '@/pages/home'
import Detail from '@/pages/detail'
import { Platform, StyleSheet } from 'react-native';

export type RootStackParamList = {
    Home: undefined;//这里的类型是往Home页面传递的参数，这里暂时使用undefined替代
    Detail: {
        id: number //给detail页面传参
    }
}

export type RootStackNavigation = StackNavigationProp<RootStackParamList>
/**
 * Stack中含有
 {
     Navigator,
     Screen
 }
 */
let Stack = createStackNavigator<RootStackParamList>();

class Navigator extends Component {
    render() {
        return (
            <NavigationContainer>
                <Stack.Navigator
                    screenOptions={
                        {
                            headerMode: 'float',//标题类型
                            headerShown: true,//是否显示标题
                            headerTitleAlign: 'center',//标题居中
                            headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,//标题跳转动画
                            cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,//页面跳转动画
                            gestureEnabled: true,//手势开启
                            gestureDirection: 'horizontal',//设置手势为左右方向
                            headerStatusBarHeight: StatusBar.currentHeight,
                            headerStyle: {
                                backgroundColor: "#f00",//标题栏颜色
                                ...Platform.select({
                                    android: {//打包android项目时起作用
                                        elevation: 0,
                                        borderBottomWidth: StyleSheet.hairlineWidth
                                    },
                                })
                            }
                        }
                    }>
                    <Stack.Screen name="Home" component={Home} options={{
                        headerTitle: '首页'
                    }}></Stack.Screen>
                    <Stack.Screen name="Detail" component={Detail} options={{
                        headerTitle: '详细页'
                    }}></Stack.Screen>
                </Stack.Navigator>
            </NavigationContainer >
        );
    }
}

export default Navigator;

• 入口文件配置 src/index.tsx

import Navgator from '@/navigator/index'

export default Navgator

• 去除react-native-gesture-handler使用旧API警告

项目的跟目录index.js中添加
import { LogBox } from 'react-native';

LogBox.ignoreLogs([
  "[react-native-gesture-handler] Seems like you\'re using an old API with gesture components, check out new Gestures system!",
]);

底部标签导航器

• 安装底部标签导航器

yarn add @react-navigation/bottom-tabs

• 创建 bottomtabs.tsx

在这里插入代码片

import React, { Component } from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import Home from '@/pages/home'
import Listen from '@/pages/listen'
import Found from '@/pages/found'
import Account from '@/pages/account'
import { RootStackNavigation } from '.';
import { getFocusedRouteNameFromRoute } from '@react-navigation/native';
export type BottomTabParamList = {
    Home: undefined,
    Listen: undefined,
    Found: undefined,
    Account: undefined
}
const Tab = createBottomTabNavigator<BottomTabParamList>();

type IProps = {
    navigation: RootStackNavigation;
    route: any
}
/**
 * 
 * @param routeName 设置标题名称
 * @returns 
 */
const getHeaderTitle = (route: any) => {
    const routeName = getFocusedRouteNameFromRoute(route) ?? 'Home';
    switch (routeName) {
        case 'Home':
            return '首页';
        case 'Listen':
            return '我听';
        case 'Found':
            return '发现';
        case 'Account':
            return '我的';
        default:
            return '';
    }
}
class Bottomtabs extends Component<IProps> {
    componentDidMount() {
        this.setOptions();
    }
    componentDidUpdate() {
        this.setOptions();
    }
    setOptions = () => {
        const { navigation, route } = this.props;
        navigation.setOptions({
            headerTitle: getHeaderTitle(route)
        });
    };
    render() {
        return (
            <Tab.Navigator
                screenOptions={{
                    headerShown: false,//是否显示标题
                    tabBarActiveTintColor: '#f00',//选中时tab颜色
                    tabBarInactiveTintColor: '#000',//默认颜色
                    tabBarLabelStyle: {
                        fontSize: 12
                    }
                }}>
                <Tab.Screen name='Home' component={Home} options={
                    {
                        tabBarLabel: '首页'
                    }
                } />
                <Tab.Screen name='Listen' component={Listen}
                    options={
                        {
                            tabBarLabel: '我听'
                        }
                    } />
                <Tab.Screen name='Found' component={Found}
                    options={
                        {
                            tabBarLabel: '发现'
                        }
                    } />
                <Tab.Screen name='Account' component={Account}
                    options={
                        {
                            tabBarLabel: '我的'
                        }
                    } />
            </Tab.Navigator>
        );
    }
}

export default Bottomtabs;

• 修改堆栈导航器，将标签导航器加入堆栈导航器

import React, { Component } from 'react';
import { NavigationContainer } from '@react-navigation/native'
import { CardStyleInterpolators, createStackNavigator, HeaderStyleInterpolators, StackNavigationProp } from '@react-navigation/stack'
import Bottomtabs from './bottomtabs'
import Detail from '@/pages/home/detail'
import { Platform, StyleSheet } from 'react-native';

export type RootStackParamList = {
    Bottomtabs: undefined;
    Detail: {
        id: number //给detail页面传参
    }
}

export type RootStackNavigation = StackNavigationProp<RootStackParamList>
/**
 * Stack中含有
 {
     Navigator,
     Screen
 }
 */
let Stack = createStackNavigator<RootStackParamList>();

class Navigator extends Component {
    render() {
        return (
            <NavigationContainer>
                <Stack.Navigator
                    screenOptions={
                        {
                            headerMode: 'float',//标题类型
                            headerShown: true,//是否显示标题
                            headerTitleAlign: 'center',//标题居中
                            headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,//标题跳转动画
                            cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,//页面跳转动画
                            gestureEnabled: true,//手势开启
                            gestureDirection: 'horizontal',//设置手势为左右方向
                            headerStatusBarHeight: StatusBar.currentHeight,
                            headerStyle: {
                                backgroundColor: "#f00",//标题栏颜色
                                ...Platform.select({
                                    android: {//打包android项目时起作用
                                        elevation: 0,
                                        borderBottomWidth: StyleSheet.hairlineWidth
                                    },
                                })
                            }
                        }
                    }>
                    <Stack.Screen name="Bottomtabs" component={Bottomtabs} />
                    <Stack.Screen name="Detail" component={Detail} options={{
                        headerTitle: '详细页'
                    }} />
                </Stack.Navigator>
            </NavigationContainer >
        );
    }
}

export default Navigator;

• 效果