React Native 底部导航设置以及如何隐藏Tab navigation自带的标题栏

安装依赖

由于直接跳过了React Navigation所以需要安装这个导航栈依赖

npm install @react-navigation/native-stack

npm install @react-navigation/bottom-tabs
# 或者
yarn add @react-navigation/native-stack

yarn add @react-navigation/bottom-tabs

其它依赖接之前的文章

思来想去还是放前面吧,因为底部导航是需要图标的,所以我们可以引入一个图标库

npm i react-native-vector-icons

官方示例代码

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

如果这个示例代码可以跑通,那就开始吧

配置底部导航

直接说不太明确,直接贴出代码,基本都可以看懂的,配合官方示例

// 路由文件,主要配置底部导航栏
import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';

// 页面栈
import HomeScreen from './screens/HomeScreen/index';
import NotifyScreen from './screens/NotifyScreen/index';

function bottomTabNavigator() {
    const Tab = createBottomTabNavigator();

    return (
        <Tab.Navigator
            screenOptions={({ route }) => ({
                tabBarIcon: ({ focused, color, size }) => {
                    let iconName;

                    switch (route.name) {
                        case 'Home':
                            iconName = 'ios-home';
                            break;
                        case 'Notify':
                            iconName = 'ios-planet';
                            break;
                    }

                    return <Ionicons name={iconName} size={size} color={color} />;
                },
                tabBarActiveTintColor: 'tomato',
                tabBarInactiveTintColor: 'gray',
                headerShown: false // 不展示标题栏
            })}>
            <Tab.Screen name="Home" component={HomeScreen} />
            <Tab.Screen name="Notify" component={NotifyScreen} />
        </Tab.Navigator>
    );
}

function App() {
    const Stack = createNativeStackNavigator();

    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="首页" component={bottomTabNavigator} />
                <Stack.Screen name="通知" component={bottomTabNavigator} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

export default App;

页面代码

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

class ScreenNotify extends Component {
  render() {
    return (
      <View>
        <Text> 我是首页 </Text>
      </View>
    );
  }
}

export default ScreenNotify;

问题疑惑

刚开始写完代码是这个样子的,当时就懵了,这不是两个标题栏重合了,冥思苦想,百度啊,谷歌啊,没解决。

最后看官方示例,然后自己反复检查,然后看官方代码

最后原来只需要一行代码即可解决

headerShown: false // 不展示标题栏

具体代码放置位置可以看上面完整代码

加上之后的样子就好看多了

看效果

所以以后大家遇到问题,尽量还是多看文档

今天就到这里了,如果有问题或者文章有错误还请及时指正,小弟在此谢过

文章作者: Caesar
文章链接: https://pcnto.com/daily-learning/34-react-native-tab-navigation.html
版权声明: 本博客所有文章除特别声明外,转载请注明来自 Peng blog

如果您喜欢本站,你可以点击主页广告以示支持,谢谢。

广告是本站收益的来源希望您能够谅解。

Comments 18

Offline
Michaelhof
Michaelhof 2022 August 30 08:05
чудный сайт купить конфеты
Offline
JustinKab
JustinKab 2022 September 3 12:49
how to get solana fees back - how to get refund on solana, solana fees back
Offline
Cooperhea7
Cooperhea7 2022 October 2 08:09
Guys just made a web-site for me, look at the link: https://mylesfjlj66777.lotrlegendswiki.com/8976865/how_assignments_writing_serv
ice_can_save_you_time_stress_and_money
Tell me your guidances. THX!
Offline
massesClilt
massesClilt 2022 October 3 21:47
Приглашаем посмотреть информацию на тему ремонт окон если надо решить проблемы с окнами . Адрес: masterokon66.ru .
Offline
Royalaxora
Royalaxora 2022 November 6 17:40
Online televisie - Ogladaj telewizje online, Television en ligne
Offline
JerryPreot
JerryPreot 2022 November 9 12:16
omg omg ссылка для тор - правильная ссылка на омг, omg omg ссылка для тор
Offline
EugenioDip
EugenioDip 2022 November 11 02:08
omg omg вход на сайт - omgomg гидра, omg omg tor ссылка
Offline
RolandUnigo
RolandUnigo 2022 November 14 03:18
additional resources http://qualitypharmshop.space
Offline
DouglasGam
DouglasGam 2022 November 17 07:26
download adobe photoshop cc 2022 - download photoshop 2022, download photoshop for windows 10
Offline
FrankSaitH
FrankSaitH 2022 November 20 07:19
шлюхи спб - проститутки алматы, шлюхи москвы
Offline
WillieFef
WillieFef 2022 November 20 08:53
double click test - mouse scroll speed test, right click cps test
Offline
SamuelOrend
SamuelOrend 2023 January 19 03:23
go to this web-site Hashcat rule
Offline
JosephSoish
JosephSoish 2023 January 21 09:04
Trezor app - Trezor wallet, Trezor android
Offline
Dwaynefer
Dwaynefer 2023 January 22 12:17
visit this site https://angkahoki365.com/argentina/1/sex-power/
Offline
JamesLem
JamesLem 2023 January 22 15:55
Extra resources https://allnatural.space/colombia/alcoholism/prod-2643/
Offline
Stephenerorb
Stephenerorb 2023 January 23 11:02
look these up https://goldpharm.space/malaysia/vision/prod-2557/
Offline
Kevinbep
Kevinbep 2023 January 24 10:14
Continued https://hotevershop.com/other/cannabioday/
Offline
Charlesembow
Charlesembow Today, 02:13
more helpful hints https://naturalpropharm.space/joints/product-2070/

添加评论

reload, if the code cannot be seen