RN开发系列＜6＞--导航控制器

1. 导航控制器的使用

官方文档
我们要做的界面跳转如下：
A --> B --> C --> D

点击可以“跳转到首页”按钮，跳到栈底，
也可以跳转回上一个界面。

2. 我们为了实现上面的一些基础的跳转功能，我们实现是这样的: 我们先需要添加一些依赖

(1) yarn add @react-navigation/native
(2) yarn add react-native-screens react-native-safe-area-context

我们为了能使用这些依赖库，我们需要通过pod安装一下。

npx pod-install ios

整体的架构方面，我们需要用到一个导航容器的组件。
如下图所示：
一个大容器组件，里面是一个类似栈结构的组件。

所以我们需要安装创建栈的依赖库

yarn add @react-navigation/native-stack

我们点开package.json，我们可以看到我们的依赖设置如下：

"dependencies": {
    "@react-navigation/native": "^6.0.8",
    "@react-navigation/native-stack": "^6.5.0",
    "react": "17.0.2",
    "react-native": "0.67.3",
    "react-native-safe-area-context": "^4.1.3",
    "react-native-screens": "^3.13.1"
  },

项目源码如下：

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

function HomeScreen({navigation}) {
    return (
        
            Home Screen
             navigation.navigate('Details')}
            />
        
    )
}

const DetailsScreen = ({navigation}) => {
    return (
        
            Details Screen
             navigation.navigate('SubDetails')}
            />
        
    );
}

const SubDetails = ({navigation}) => {
    return (
        
            Details Screen
             navigation.navigate('FourthDetails')}
            />
        
    )
}

const FourthDetails = ({navigation}) => {
    return (
        
            Details Screen
             navigation.popToTop()}
            />
             navigation.navigate('SubDetails')}
            />
             navigation.goBack()}
            />
        
    )
}



const Stack = createNativeStackNavigator();

function  App() {
    return (
        
            
                
                
                
                
            
        
    );
}

export default App;

const styles = StyleSheet.create({
    textStyle: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }
})

我们的代码入口函数如下：

import * as React from 'react';
import Container from './Navigator';

function App() {
    return (
        
    );
}

export default App;

整个程序的入口函数：

/**
 * @format
 */

import {AppRegistry} from 'react-native';
import App from './App/Navigator/index';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

3. 导航控制器之间的传值（顺传）

function HomeScreen({navigation}) {
    return (
        
            Home Screen
             navigation.navigate('Details',{
                    param1: 18,
                    param2: "张三"
                })}
            />
        
    )
}

const DetailsScreen = ({route,navigation}) => {
    const { param1, param2} = route.params;
    return (
        
            Details Screen
            年龄：{JSON.stringify(param1)}
            姓名：{JSON.stringify(param2)}
             navigation.navigate('SubDetails')}
            />
        
    );
}

4. 导航控制器之间的传值（逆传）

function HomeScreen({navigation,route}) {
    React.useEffect(() => {
        if (route.params?.post) {

        }
    },[route.params?.post]);

    return (
        
            Home Screen
             navigation.navigate('CreatePost')}
            />
            {margin: 10}}>Post: {route.params?.post == null ? '空的': route.params.post}
        
    );
}

function CreatePostScreen({route,navigation}) {
    const [postText, setPostText] = React.useState('');

    return (
        <>
            

             {
                    navigation.navigate({
                        name: 'Home',
                        params: {post: postText},
                        merge: false,
                    });
                }}
            />
        
    );
}

5.设置标题的两种方式 直接设置

{ title: '主页'}}/>

设置通过传参数 step1 ： 增加参数

 ({ title: route.params.name })}
 />

step2 ：传参

 navigation.navigate('Details', { name: '详情页'})}
 />

6. 导航栏设置样式 单独设置

{ 
        title: '主页',
        headerStyle: {
                 backgroundColor: 'green',
          },
          headerTintColor: 'blue',
                  headerTitleStyle: {
                  fontWeight: 'bold'
          }
}}/>

统一设置，一般来说，都是统一设置的，对每个导航栏都单独设置太麻烦了

            {
                    headerStyle: {
                        backgroundColor: 'blue'
                    },
                    headerTintColor: 'black',
                    headerTitleStyle: {
                        fontWeight: 'bold'
                    }
                }}

自定义标题，比如把标题用一个图片替换

function LogoTitle() {
    return (
        {width: 50, height: 50}}
            source = {require('../assets/english.jpeg')}
        />
    );
}


{ 
          headerTitle: (props) => 
          }}
 />

7. 导航栏标题按钮 在标题中添加按钮

                { 
                        headerTitle: (props) => ,
                        headerRight: () => (
                             alert ('点击右上角')}
                                title = "点我"
                                color = '#fff'
                            />
                        )
                    }}
                />

标题与屏幕交互

const SecondScreen = ({navigation}) => {
    const [count, setCount] = React.useState(0);

    React.useLayoutEffect(() => {
        navigation.setOptions({
            headerRight: () => (
                 setCount( c => c + 1)}
                    title = "update count"
                />
            ),
        });
    },[navigation]);

    return (
        
             我是SecondScreen: {count} 
             setCount ( e => e - 1)}
            />
        
    );
}