路由 页面转场动画

官方文档

https://reactnavigation.org/

1. 安装

react-navigation现在的不同路由器，需要分别安装。

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

官网的依赖（实操可行）
基础导航 native-stack（“栈”路由）

@react-navigation/native
react-native-screens
react-native-safe-area-context
@react-navigation/native-stack

yarn add @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/native-stack

react-native-screens
安卓：修改\android\app\src\main\java\com\\MainActivity.java文件代码

...
// 导入Bundle类，该类的格式为key-value，用于实现数据的传递
import android.os.Bundle;
public class MainActivity extends ReactActivity {
  // 覆写生命周期函数,在Activity被创建时调用
  // 而Bundle类型的savedInstanceState可以保存状态数据
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(null);
  }
  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return "demo1";
  }
}

路由组件必须只能有一个，而且必须是根组件

import AppNavigator from '~/navigation';
// ...
render() {
    // const {isLoading} = this.state;
    return (
      <AppNavigator />
      // <SafeAreaView>
      //   <View style={styles.logoWare}>
      //     <StatusBar backgroundColor="transparent" translucent={true} />
      //     <Image style={styles.logo} source={require('~/assets/img/cat.jpg')} />
      //     <Login />
      //     <Loading isLoading={isLoading} />
      //     <Svg icon="male" size={px2dp(45)} style={styles.writeBtn} />
      //     <Svg icon="female" size={px2dp(45)} style={styles.writeBtn} />
      //     <LinearBtn
      //       style={{width: px2dp(300), height: px2dp(50)}}
      //       textMsg="获取验证码"
      //     />
      //   </View>
      // </SafeAreaView>
    );
  }

Android导航标题居中问题

headerTitleAlign: ‘center’, // 标题居中 android/ios

<NavigationContainer>
      <Stack.Navigator headerMode="none" initialRouteName='Home' screenOptions={{
        headerShadowVisible: false, // android 导航去阴影
        headerTitleAlign: 'center', // 标题居中 android/ios
        // 设置导航栏字体样式
        headerTitleStyle: {
          fontSize: 17,
          color: '#fff',
          fontFamily: 'PingFangSC-Semibold',
          fontWeight: 'bold',
        },
        headerStyle: {
          backgroundColor: '#f4511e',
        },
        // 标题右侧功能组件
        headerRight: () => (
          <Button
            onPress={() => alert('This is a button!')}
            title="Info"
            color="red"
          />
        ),
      }}>
        <Stack.Screen name="Home" component={HomeScreen} options={{
          title: '首页',
        }} />
        <Stack.Screen name="Details" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>

导航调用堆栈

@react-navigation/native-stack

import * as React from 'react';
import { Button, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
function DetailsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details!</Text>
    </View>
  );
}
function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}
function SettingsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}
const HomeStack = createNativeStackNavigator();
function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Home" component={HomeScreen} />
      <HomeStack.Screen name="Details" component={DetailsScreen} />
    </HomeStack.Navigator>
  );
}
const SettingsStack = createNativeStackNavigator();
function SettingsStackScreen() {
  return (
    <SettingsStack.Navigator>
      <SettingsStack.Screen name="Settings" component={SettingsScreen} />
      <SettingsStack.Screen name="Details" component={DetailsScreen} />
    </SettingsStack.Navigator>
  );
}
const Tab = createBottomTabNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeStackScreen} />
        <Tab.Screen name="Settings" component={SettingsStackScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}