react-navigation

安装核心包

yarn add @react-navigation/native

安装@react-navigation/native本身依赖的相关包

react-native-reanimated:动画库

react-native-gesture-handler:手势库

react-native-screens：使用原生代码实现screen容器可以提高性能流畅度

react-native-safe-area-context：可以让我们的组件渲染在一个安全的区域（比如有些移动设备是异性的，刘海屏、挖孔屏等）

@react-native-community/masked-view：堆栈式导航器所依赖的库

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

React Native 0.60以上，链接是自动的，因此不需要运行react原生链接。

但在iOS开发上，则需要安装pod来完成链接

cd ios

pod install

打开android/app/src/main/java//MainActivity.java

加入以下代码

public class MainActivity extends ReactActivity {

// ...

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(null);

}

// ...

}

在该文件顶部加入

import android.os.Bundle;

在项目入口文件引入@react-navigation/native

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

如何使用堆栈式导航器

安装核心库

yarn add @react-navigation/stack

比如说写一个home组件

import React from 'react';

import { View, Text } from 'react-native';

class Home extends React.Component {

    render() {

        return (

           

                Home

               

        )

    }

}

export default Home;

再写一个Detail组件

import React from 'react';

import { View, Text } from 'react-native';

class Detail extends React.Component {

render() {

return (

Detail

)

}

}

export default Detail;

然后在navigator下新建个文件夹index.tsx

import React from 'react';

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

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

import Home from '@/pages/Home';

import Detail from '@/pages/Detail';

type RootStackPareamList = {

    Home: undefined;

    Detail:undefined;

}

let Stack = createStackNavigator();

/*{

    Navigator, // 导航器

    Screen // 路由，也就是页面

}

*/

class Navigator extends React.Component {

    render(){

        return (

           

               

                   

                   

               

            );

    }

}

export default Navigator;

然后在src/index.tsx

import Navigator from '@/navigator/index';

export default Navigator;

可以发现Android和ios的标题显示不一样，这是因为ios和Android的默认设计风格不一样导致的。

如何统一ios和Android的标题风格呢

使用screanOptions属性就好，在Stack.Screen里也有options属性，这样就可以单独设置某个页面的标题样式了,还有一些常用的属性 如：headerTitle:'首页'

import React from 'react';

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

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

import Home from '@/pages/Home';

import Detail from '@/pages/Detail';

type RootStackPareamList = {

Home: undefined;

Detail:undefined;

}

const Stack = createStackNavigator();

/*{

Navigator, // 导航器

Screen // 路由，也就是页面

}

*/

class Navigator extends React.Component {

render(){

return (

          

   

                    screanOptions={{

                        headerTitleAlign:'center',

                    }}>

   

   

   

    );

}

}

export default Navigator;

页面间的跳转如何实现？

import React from 'react';

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

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

import Home from '@/pages/Home';

import Detail from '@/pages/Detail';

import {

createStackNavigator,

StackNavigationProp,

} from '@react-navigation/stack'; // 自动引入

type RootStackPareamList = {

Home: undefined;

Detail:undefined;

}

// 加这一行

export type RootStackNavigation = StackNavigationProp

const Stack = createStackNavigator();

/*{

Navigator, // 导航器

Screen // 路由，也就是页面

}

*/

class Navigator extends React.Component {

render(){

return (

                    headerMode="float"

screanOptions={{

headerTitleAlign:'center',

}}>

);

}

}

export default Navigator;

tips:

headerMode="float"所有页面共用一个标题栏（ios的默认）

headerMode="none"没有标题栏

headerMode="screen"每个页面都有一个标题栏（Android的默认）

在Home组件中使用

import React from 'react';

import { View, Text, Button } from 'react-native';

import { RootStackNavigation } from '@/navigator/index'

interface IProps {

    navigation:RootStackNavigation;

}

class Home extends React.Component {

    onPress = () => {

        const {navigation} = this.props;

        navigation.navigate("Detail");

    }

   

render() {

return (

Home