React-native学习-60:react-native-tab-navigator做底部导航栏

最新推荐文章于 2024-08-13 08:46:46 发布

hopetomorrow

最新推荐文章于 2024-08-13 08:46:46 发布

阅读量319

点赞数 1

本文链接：https://blog.csdn.net/hopetomorrow/article/details/119742480

版权

该博客介绍了如何在React Native项目中集成底部导航栏，通过引入react-native-tab-navigator库，创建并设置各个标签页，包括首页、发布和我的三个页面，每个页面都有对应的图标和选中状态图标。示例代码详细展示了实现过程。

摘要由CSDN通过智能技术生成

在ReactNative项目中加入底部导航栏，效果如图所示：

第一步：导入项目

npm install react-native-tab-navigator

第二步：文件中导入使用

import TabNavigator from 'react-native-tab-navigator'

代码:

import React, { Component } from 'react'
import { View, Text, Button } from 'react-native'
//import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
//const Tab = createBottomTabNavigator();
import TabNavigator from 'react-native-tab-navigator';
import Ionicons from 'react-native-vector-icons/Ionicons';

import HomeScreen from './home'
import EditScreen from './edit'
import MineScreen from './mine'

export default class tabbar extends Component {
    state = {
        selectedTab: 'home',
        page: [
            {
                selected: 'home',
                title: '首页',
                renderIcon: () => <Ionicons name='home' size={20} color={'#888'} />,
                renderSelectedIcon: () => <Ionicons name='home-outline' size={20} color={'#F00'} />,
                onPress: () => this.setState({ selectedTab: 'home' }),
                component: <HomeScreen />
            },
            {
                selected: 'edit',
                title: '发布',
                renderIcon: () => <Ionicons name='add' size={20} color={'#888'} />,
                renderSelectedIcon: () => <Ionicons name='add-outline' size={20} color={'#F00'} />,
                onPress: () => this.setState({ selectedTab: 'edit' }),
                component: <EditScreen />
            },
            {
                selected: 'mine',
                title: '我的',
                renderIcon: () => <Ionicons name='hammer' size={20} color={'#888'} />,
                renderSelectedIcon: () => <Ionicons name='hammer-outline' size={20} color={'#F00'} />,
                onPress: () => this.setState({ selectedTab: 'mine' }),
                component: <MineScreen />
            },
        ]
    }

    render() {
        return (
            <View style={{ flex: 1, backgroundColor: '#F5FCFF' }}>
                <TabNavigator >
                    {
                        this.state.page.map((v, i) =>
                            <TabNavigator.Item key={i}
                                selected={v.selected === this.state.selectedTab}
                                title={v.title}
                                renderIcon={v.renderIcon}
                                renderSelectedIcon={v.renderSelectedIcon}
                                onPress={v.onPress}
                                selectedTitleStyle={{ color: "#c863b5" }}
                                tabStyle={{
                                    backgroundColor: "#eee", justifyContent: "center"
                                }}
                            >
                                {v.component}
                            </TabNavigator.Item>
                        )
                    }
                </TabNavigator>
            </View>
        )
    }
}