RN开发系列＜7＞--标签导航器

jh_cao

已于 2022-03-15 11:53:24 修改

阅读量721

点赞数

分类专栏： # RN/Flutter/Android 文章标签： react native react.js javascript

于 2022-03-15 11:49:05 首次发布

本文链接：https://blog.youkuaiyun.com/JH_Cao/article/details/123498688

版权

RN/Flutter/Android 专栏收录该内容

13 篇文章

订阅专栏

1. 上一篇讲到了导航控制器，这里将介绍标签导航器。这也是最常见的APP架构之一。

请添加图片描述

2.在写之前，我觉得有必要画一下架构原理图

在这里插入图片描述

NavigationContainer里面装了一个TabNavigator
一个TabNavigator里面装了2个StackNavigator，这样底部就有2个标签栏可以切换了
每个StackNavigator里面，装子视图，这样就在里面导航切换了

代码如下：

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

// tab1
function HomeScreen({navigation}) {
    return (
        <View style = { styles.normalScreenStyle }>
            <Text>HomeScreen</Text>
            <Button
                title = "点击"
                onPress = {() => {
                    navigation.navigate('SubHomeScreen')
                }}
            />
        </View>
    ); 
}

function SubHomeScreen() {
    return (
        <View style = { styles.normalScreenStyle }>
            <Text>subHomeScreen</Text>
        </View>
    );
}

const HomeStack = createNativeStackNavigator();

const HomeStackScreen = () => {
    return (
        <HomeStack.Navigator>
            <HomeStack.Screen name = "Home" component = { HomeScreen }/>
            <HomeStack.Screen name = "SubHomeScreen" component = { SubHomeScreen }/>
        </HomeStack.Navigator>
    );
}

// tab2 
const Settings = ({navigation}) => {
    return (
        <View style = { styles.normalScreenStyle }>
            <Text>Settings</Text>
            <Button
                title = "设置"
                onPress = {() => {
                    navigation.navigate('SubSettings')
                }}
            />
        </View>
    );
}

const SubSettings = () => {
    return (
        <View style = { styles.normalScreenStyle }>
            <Text>subSettings</Text>
        </View>
    );
}

const SettingStack = createNativeStackNavigator();

const SettingStackScreen = () => {
    return (
        <SettingStack.Navigator>
            <SettingStack.Screen name = 'Settings' component = { Settings }/>
            <SettingStack.Screen name = 'SubSettings' component = { SubSettings }/>
        </SettingStack.Navigator>
    );
}

// Tab
const Tab = createBottomTabNavigator();

const App = () => {
    return (
        <NavigationContainer>
            <Tab.Navigator screenOptions = {{headerShown: false}}>
                <Tab.Screen name = 'Home' component = { HomeStackScreen }/>
                <Tab.Screen name = 'Settings' component = { SettingStackScreen}/>
            </Tab.Navigator>
        </NavigationContainer>
    );
}

export default App;

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

不同的tab之间，通过导航控制器直接跳转也是可以的，代码如下：

function HomeScreen({navigation}) {
    return (
        <View style = { styles.normalScreenStyle }>
            <Text>HomeScreen</Text>
            <Button
                title = "点击"
                onPress = {() => {
                    navigation.navigate('SubHomeScreen')
                }}
            />
            <Button 
                title = "切换标签导航SubSettings"
                onPress = {() => {
                    navigation.navigate('SubSettings')
                }}
            />
            <Button 
                title = "切换标签导航Settings"
                onPress = {() => {
                    navigation.navigate('Settings')
                }}
            />
        </View>
    );