ReactNative学习----2react-navigation实现App的底部菜单

最新推荐文章于 2021-06-25 11:43:42 发布

原创最新推荐文章于 2021-06-25 11:43:42 发布 · 438 阅读

1 ·

CC 4.0 BY-SA版权

ReactNative 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何在ReactNative项目中利用react-navigation库创建App的底部导航菜单。通过安装react-navigation模块，配置路由并展示Home1、Home2、Home3三个页面的简单实现。详细步骤包括项目结构、源码解析以及提供源码下载链接。

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

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

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

源代码：
BottomIndex 配置路由，Home1,Home2,Home3分别是一个页面
BottomIndex 代码：

import React from 'react';
import {Text, View, Image} from 'react-native';
import {StackNavigator, createBottomTabNavigator, createStackNavigator} from 'react-navigation';
import Home1 from './Home1';
import Home2 from './Home2';
import Home3 from "./Home3";


export default createBottomTabNavigator(
    {

        List: {
            screen: Home1,
            navigationOptions: {
                tabBarLabel: '上映',
                tabBarIcon: ({ focused }) => (
                    <Image source={focused ? require('../img/talk_fill.png') : require('../img/talk.png')} style={{width:24,height:24}} />
                ),
            }
        },
        Cinema: {
            screen: Home2,
            navigationOptions: {
                tabBarLabel: '影院',
                tabBarIcon: ({ focused }) => (
                    <Image source={focused ? require('../img/photo_fill.png') : require('../img/photo.png')} style={{width:24,height:24}} />
                ),
            }
        },
        Mine: {
            screen: Home3,
            navigationOptions: {
                tabBarLabel: '我的',
                tabBarIcon: ({ focused }) => (
                    <Image source={focused ? require('../img/mine_fill.png') : require('../img/mine.png')} style={{width:24,height:24}} />
                ),
            }
        },
    },
    {
        tabBarOptions: {
            activeTintColor: '#0078d7',
            inactiveTintColor:'#000000',
            labelStyle: {
                fontSize: 12,
                marginBottom:1,
            },
            style: {
                backgroundColor: '#FFFFF',
            },
            tabBarOptions: {
                showIcon:true,
            }

        }

    }

);

Home1代码：

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

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


export default class Home1 extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>Home1</Text>

            </View>
        );
    }
}

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

});

Home2,Home3和Home1代码一样，这里就不贴了

源码下载：
源码：bkdemo3----bottom
https://download.youkuaiyun.com/download/zhaihaohao1/11022315
综合应用：
https://blog.youkuaiyun.com/zhaihaohao1/article/details/88633019
https://blog.youkuaiyun.com/zhaihaohao1/article/details/88633219