关注我们

React Native - 底部导航

React Native Tab Navigation是移动应用程序中最常见的导航样式。 “Tab Navigation"选项卡在屏幕底部或标题下方的顶部，有时也用作标题。它用于在不同的路线屏幕之间切换。

要创建基于选项卡的导航，请在react-navigation库的根函数中导入createBottomTabNavigator和createAppContainer。

BottomTabNavigator配置

BottomTabNavigator有各种可配置的props。他们之中有一些是:

链接：https://www.learnfk.comhttps://www.learnfk.com/react-native/react-native-tab-navigation.html

来源：LearnFk无涯教程网

Prop	Description
initialRouteName	初始加载的路由名称。
order	是一个路由数组，用于设置顺序。
paths	提供了路由路径，该配置覆盖了routeConfigs中设置的路径。
lazy	将其设置为{true}可使选项卡在第一次激活时呈现。如果将其设置为false，则将立即呈现所有选项卡。其默认值为true。
tabBarComponent	它会覆盖用作选项卡栏的组件。它是可选的。
tabBarOptions	它是具有以下属性的对象:activeTintColor，activeBackgroundColor，inactiveTintColor，inactiveBackgroundColor，showLabel，showIcon，style，labelStyle，tabStyle，allowFontScaling。

BottomTabNavigator示例

创建两个名为HomeScreen和ProfileScreen的类。分别使用“HomeScreen"和“ProfileScreen"选项卡在createBottomTabNavigator函数中注册这些类。

复制代码

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';

class HomeScreen extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text>Home Screen</Text>
            </View>
        );
    }
}
class ProfileScreen extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text>Profile Screen</Text>
            </View>
        );
    }
}

const TabNavigator = createBottomTabNavigator({
    Home: HomeScreen,
    Profile: ProfileScreen,
});
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
});

export default createAppContainer(TabNavigator);

输出:

如果我们设置initialRouteName:“Profile"，则它将"ProfileScreen"加载为初始路由选项卡。

复制代码

const TabNavigator = createBottomTabNavigator({
        Home: HomeScreen,
        Profile: ProfileScreen,
    },
    {
        initialRouteName: "Profile"
    }
);

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

Spring Cloud 微服务项目实战 -〔姚秋辰（姚半仙）〕

Kubernetes入门实战课 -〔罗剑锋〕

AI绘画核心技术与实战 -〔南柯〕

徐昊 · AI 时代的软件工程 -〔徐昊〕

好记忆不如烂笔头。留下您的足迹吧 :)