ReactNative学习----3react-navigation实现App的顶部菜单

最新推荐文章于 2025-06-07 10:40:32 发布

zhaihaohao1

最新推荐文章于 2025-06-07 10:40:32 发布

阅读量757

点赞数

CC 4.0 BY-SA版权

分类专栏： ReactNative

本文链接：https://blog.youkuaiyun.com/zhaihaohao1/article/details/88565940

ReactNative 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何在ReactNative项目中利用react-navigation库实现App的顶部菜单。通过官方文档和示例代码，展示了从安装模块到配置路由的全过程，包括TopIndex、Tab1、Tab2和Tab3等页面的设置。提供了源码下载链接以及相关综合应用的博客详情链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方文档：
https://reactnavigation.org/docs/zh-Hans/2.x/getting-started.html
效果图：
在这里插入图片描述

项目结构：
在这里插入图片描述

安装模块：
cd 到项目目录下
yarn add react-navigation@2.18.3

源代码：
TopIndex 配置路由，Tab1,Tab2,Tab3分别是一个页面
TopIndex代码：

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

import { createMaterialTopTabNavigator,} from 'react-navigation'; // 1.0.0-beta.27
import Tab1 from './Tab1'
import Tab2 from './Tab2';
import Tab3 from './Tab3';




export default createMaterialTopTabNavigator(
    {
        Tab1: { screen: Tab1 },
        Tab2: { screen: Tab2 },
        Tab3: { screen: Tab3 },

    },
    {
        navigationOptions: ({ navigation }) => ({
            tabBarIcon: ({ focused, tintColor }) => {
                const { routeName } = navigation.state;
                let iconName;
                if (routeName === 'Tab1') {
                    iconName = `ios-information-circle${focused ? '' : '-outline'}`;
                } else if (routeName === 'Tab2') {
                    iconName = `ios-options${focused ? '' : '-outline'}`;
                }
                else if (routeName === 'Tab3') {
                    iconName = `ios-options${focused ? '' : '-outline'}`;
                }

            },
        }),

        tabBarOptions: {
            activeTintColor: '#FFFFFF',
            inactiveTintColor: '#000000',

            labelStyle: {
                fontSize: 15,
                marginBottom:1,
            },

            tabBarOptions: {
                showIcon:true,
            }

        },
        animationEnabled: false,
        swipeEnabled: false,
    }
);

Tab1

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,Button} from 'react-native';


export default class Tab1 extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>Tab1</Text>
                <Button
                    title="Go to Tab2"
                    onPress={() => this.props.navigation.navigate('Tab2')}
                />

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },

});

Tab2,Tab3都是空文件，这里就不贴代码了

源码下载：
源码：bkdemo3----top
https://download.youkuaiyun.com/download/zhaihaohao1/11022315

综合应用：
https://blog.youkuaiyun.com/zhaihaohao1/article/details/88633019
https://blog.youkuaiyun.com/zhaihaohao1/article/details/88633219