无法使用自定义选项卡栏react native
在 React Native 中，默认情况下是无法直接使用自定义选项卡栏的。React Native 提供了自带的选项卡组件 TabNavigator 和 TabBarIOS 来实现选项卡功能。
TabNavigator 是一个用于创建底部选项卡的组件，可以通过配置创建多个选项卡页面，并在底部显示对应的图标和文本。它的优势在于简单易用，适合快速搭建一个基础的选项卡栏。你可以使用腾讯云的小程序云开发来构建一个基于 TabNavigator 的移动应用，相关产品是小程序云开发，你可以在这里了解更多信息：https://cloud.tencent.com/product/wxcloud
TabBarIOS 是一个用于创建顶部选项卡的组件，适用于 iOS 平台。它可以在顶部显示多个选项卡，并在切换时自动切换对应的页面。TabBarIOS 适合创建具有较多页面的复杂应用。你可以使用腾讯云的移动应用开发平台 MTA（Mobile Tencent Analytics）来进行移动应用数据统计和分析，相关产品是 MTA，你可以在这里了解更多信息：https://mta.qq.com
如果需要实现自定义选项卡栏，可以使用第三方组件库来辅助实现。比较常用的有 react-navigation 和 react-native-tab-view。react-navigation 提供了灵活的导航解决方案，可以实现自定义选项卡栏，并且支持多种导航效果。react-native-tab-view 是一个专门用于创建选项卡页面的组件库，提供了丰富的选项卡样式和交互效果。
总结起来，如果要在 React Native 中实现自定义选项卡栏，可以选择使用第三方组件库如 react-navigation 或 react-native-tab-view。这些组件库可以满足不同的需求，可以根据项目的具体情况选择合适的组件库。
相关·内容
我已经在我的项目中添加了一个选项卡栏组件，我已经从简单的组件导航到该组件，但问题是导航栏即将到来，但我无法更改导航栏的任何属性。请帮帮忙。 我已经尝试了直接导航，然后导航栏在没有选项卡底部项目的情况下工作 import React, { Component } from "react";
import { View } from "react-native";
import { Container, Content, Picker, Button, Text } from "native-base";
import { createBottom
浏览 10提问于2019-03-30得票数 0
我在我的反应本机应用程序中使用@react-navigation/material-bottom-tabs。如何增加图标之间的空间，并根据设备的宽度对齐它们。
react-native: 0.62.1 @react-navigation/native: ^5.1.5 @react-navigation/material-bottom-tabs: ^5.1.8
电流行为
更多的空间是左右的底部标签栏，我不能对齐空间之间的图标。示例
期望行为
我使用的材料-底部标签，我想增加空间之间的一个图标和另一个图标在材料底部标签(或)对齐图标空间平等。
浏览 2提问于2020-04-12得票数 1
8回答
从堆栈导航器反应导航5隐藏标签栏
、、、、
我想知道如何将底部选项卡条隐藏在我的堆栈导航器中的特定屏幕中，该屏幕嵌套在物质底部选项卡栏上。
这是我的堆栈导航器的代码
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import PondScreen from '../screens/PondScreen/PondScreen';
import PondDetailScreen from '../screens/PondScreen/PondDetai
浏览 10提问于2020-02-11得票数 27
回答已采纳
我是react-native的新手，正在尝试渲染底部导航栏。我注意到，这些组件在Android上不能按照我想要的方式呈现，因为原生导航按钮(back、home、menu(?))对某些设备来说是“屏幕上的”。这显然不是iPhones的情况。因此，我的导航栏在Android上看起来相当糟糕，它的一半基本上被切断了，并“隐藏”在按钮后面(见截图)。
我知道有一些方法可以使用SafeAreaView，但是这样做只是将我的导航栏呈现在屏幕的顶部……我没能把它弄下来。我试过填充，但这也反映在iOS版本上...所以不能去。
只是想知道有没有什么我能做的？我在网上找过了，但我的搜索结果是黑的。
我制作了一个屏
浏览 15提问于2021-02-24得票数 0
在React Native 0.62中，是否可以在中隐藏使用createBottomTabNavigator创建的选项卡栏？
我很好奇这是否有可能像LinkedIn一样，当你向下滚动页面时，标签栏消失了，当你向上滚动时，它又重新出现了。或者只有一个自定义标签栏才能实现？
浏览 23提问于2020-05-30得票数 5
回答已采纳
1回答
如果这个问题已经在其他地方得到了回答，请随时给我指出正确的方向，但我无法通过这里或谷歌找到它。也许我只是不知道这个东西的正确名称？
我目前正在使用react导航(用于react-native)，我想知道是否有可能使选项卡栏中心的一个图标比其他图标更大，特别是在页面滚动时使其后面具有透明度。
在这里模拟一个例子：
有没有人知道这个库有没有可能做到，以及如何实现？
我也在想，一旦他们真正发布了一个没有损坏的、错误的、带有准确文档的版本，并且没有与当前版本的react-native一起损坏，我就可以尝试一下Wix库react-native-navigation。(它现在有点灾区，但它看起来非常好，所
浏览 1提问于2017-04-26得票数 9
我是第一次接触react-native-paper，并且正在尝试学习如何使用BottomNavigation。我正在看来自react-native-paper documentation的示例，但无法确定如何增加其中一个图标的大小。 假设我有5个图标，相册，库，新建，收藏，购买，并想增加中间图标的大小，新建，我该怎么做呢？
浏览 22提问于2020-06-21得票数 1
我想让徽标在中间的tarbar，这是溢出标签栏在顶部。怎么做？................................................................................................................................
import React from 'react';
import TabNavigator from 'react-native-tab-navigator';
import {
View,
Text,
StyleSheet,
I
浏览 11提问于2017-02-24得票数 6
3回答
我正在尝试实现类似Instagram的导航
我在App.js中有一个按钮选项卡导航
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { createAppContainer, createBottomTabNavigator} from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons'
浏览 3提问于2019-02-13得票数 0
我正在使用React Native创建一个应用程序。我使用的是React导航。这是当前项目。
但我想从底部打开一个模型。我想隐藏选项卡栏。请告诉我怎么做。
当前项目屏幕：
浏览 19提问于2020-02-17得票数 1
我已经分析了我的应用程序的需求，并决定我可以在web上使用移动友好的组件更有效地开发它，并在应用程序中通过web视图呈现它。
我需要权限才能访问相机和图库(拍摄照片/视频，上传照片/视频)。
基本上，一个带有webview的单屏应用程序显示了具有移动友好组件和上述权限的站点。
这是我当前的app.js：
import React from 'react';
import { Button, Text, View, TouchableOpacity, StyleSheet } from 'react-native';
import Ionicons from &#
浏览 11提问于2019-07-12得票数 0
我正在做一个老项目，其中tabbar是使用'react-native-router-flux‘中的场景创建的。有五个标签，目前都显示了一个特定的类组件，但我的要求是，我想要显示一个弹出窗口，当点击中心标签时，弹出窗口应该显示在选项卡栏按钮单击之前打开的位置。 这有可能实现吗?，目前我创建了一个在底部有一个小弹出窗口的whold组件，我试图使背景透明以显示背景视图，但它不起作用。 ? 我已经创建了如下的选项卡栏 import { Scene, Router, ActionConst, Actions } from 'react-native-router-flux
浏览 31提问于2020-10-21得票数 1
我正在尝试建立一个底部导航栏，一切工作，但导航栏不显示。我对原生的反应也有些陌生。我觉得问题出在导出默认设置上，因为它没有将对象作为应用程序注册表。
其他文件也可以工作，就像没有错误但导航栏不显示一样
import React, { Component } from "react";
import { AppRegistry, Text, View, StyleSheet } from "react-native";
import Icon from "react-native-vector-icons/FontAwesome";
import
浏览 9提问于2018-12-17得票数 2
我的标签里有bottomTabNavigator，每个标签里面都有堆栈。每当我单击另一个选项卡时，我都想重置堆栈。 选项卡导航器- 选项卡1- |_Stack导航器 - Screen 1
- Screen 2 选项卡2- |_Stack导航器 - Screen 3
- Screen 4 选项卡3- |_Stack导航器 - Screen 5
- Screen 6 目前的情况是，。假设我在选项卡1上-我从屏幕1导航到屏幕2。
浏览 16提问于2020-04-03得票数 0
回答已采纳
如何使用react-native-router-flux在导航栏上实现这种排序颜色。谢谢
浏览 7提问于2017-09-16得票数 2
我正在使用React Native Router Flux，并且有一个底部的选项卡栏。我设置了一个屏幕，上面有很多指向其他屏幕的链接。如果父场景没有添加到选项卡中，我就无法路由到它。
我已经阅读了文档，并尝试了各种选项和样式。我认为最简单的选择是将宽度0应用于特定的场景组，但它不适用于视图样式。
我希望能够隐藏父场景，这样它就不会显示在选项卡栏中。目前，没有任何变化，项目显示在选项卡栏中。
浏览 0提问于2019-01-03得票数 0
我正在使用StackNavigator加载一个用App.js中的react-native-tab-navigator创建的标签栏。我在Tabbar中有一个视图。如何从该视图导航回App.js？
App.js
import { StackNavigator } from 'react-navigation';
const SigninSignup = StackNavigator({
Signup: { screen: Signup },
Signin: { screen: Signin },
});
render() {
if (this.stat
浏览 6提问于2017-12-20得票数 0
回答已采纳
1回答
我正在尝试添加本机基本标签组件到我的项目使用世博。我完全通过本机基础自己的例子来测试它是否工作，但无法使它工作任何选项卡。
此外，为了检查依赖是否导致问题，我在新的项目上测试它，并且选项卡再次失效。因此，I测试选项卡而不使用，并且它运行了。因此，我相信问题是世博会，但我不知道如何解决它。我会在下面写我的依赖性，谢谢你的帮助。
选项卡不起作用的部分是，当我单击Tab2或Tab3时，没有任何更改，它被卡在Tab1(初始选项卡)上。而且，它不包含任何Tab的内容，包括初始Tab (Tab1)。
我的依赖性：
"axios": "^0.18.0",
"expo&
浏览 1提问于2019-03-05得票数 1
我正在尝试导航到react native中的一个屏幕，但我不希望该屏幕显示在底部导航中。我希望导航栏中的所有其他屏幕都能够导航到单独的屏幕，但单独的屏幕始终显示在底部导航栏上。如何才能将其设置为不在那里显示？谢谢!
浏览 23提问于2019-01-10得票数 0
回答已采纳
我试图在react (原生)选项卡导航中将上边框应用于选定的选项卡，但无法解决这个问题。 我在其他解决方案中看到有一个"indicatorStyle“，但我无法添加它，看起来它已被弃用或其他什么。 请看以下图片和代码： 我的标签导航器： ? 所需的选项卡导航器示例： ? 这是我的选项卡导航器： import * as React from 'react';
import { Text, View, Dimensions } from 'react-native';
import { createStackNavigator } fro
浏览 12提问于2021-01-08得票数 1
回答已采纳
4回答
标签栏背景色未被更改
、、、、
我是新的反应-本土发展。我正在使用来自'react-navigation‘的TabNavigator在React中的选项卡栏--Native，一切都很好，除了选项卡栏activeBackgroundColor和inactiveBackgroundColor没有在android中被更改。它的蓝色只像下面给出的图像。
我使用的代码是：
import React, { Component } from 'react';
import { TabNavigator } from 'react-navigation';
import { PixelRat
浏览 1提问于2018-01-04得票数 5
回答已采纳
1回答
我已经创建了一个具有4个选项卡导航屏幕的导航器-> home、Search、Upload和Library；我还创建了堆栈导航屏幕，如注册、登录、家庭选项卡和视频。现在，我想从上传屏幕上删除下面的选项卡栏，但不确定它是否可行？
下面是我所写的确切代码：
import React from 'react';
import 'react-native-gesture-handler';
import {StatusBar} from 'react-native';
import {NavigationContainer, DarkTheme} f
浏览 1提问于2020-09-01得票数 0
回答已采纳
当tabBarPosition设置为底部时，我的选项卡栏可以很好地呈现，但当我将tabBarPosition设置为顶部时，我的选项卡栏不能正确显示。
下面是我的底部位置代码(这是仪表板场景的代码)。
<Provider store={store}>
<Router>
<Scene key="root" hideNavBar={true}>
<Scene key="tabbar" tabs={true} tabBarStyle={{ backgroundColor: '#e
浏览 11提问于2018-01-01得票数 1
回答已采纳
1回答
我在屏幕顶部使用react-native-tab-view作为显示选项卡。如果屏幕数量增加(超过5)，屏幕视图看起来会很拥挤。
下面是我的代码片段
export default class CustomTabViewComponent extends React.Component{
state = {
index: 0,
routes: [
{ key: 'tab1', title: 'Tab1' },
{ key: 'tab2', title: 'Tab2' },
{ key
浏览 0提问于2019-05-30得票数 1
我是第一个反应的人--土生土长，学会了。在学习react-本地选项卡视图时，我试图改变它的颜色，但是经过几次尝试，我还是做不到。如果有人指导我如何改变选项卡的颜色，我将非常感激，它默认是蓝色的。，这是一段代码。任何帮助都将不胜感激。
import * as React from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
const
浏览 6提问于2020-10-26得票数 8
回答已采纳
我已经在Chrome中安装了react developer tools扩展，如果我查看扩展列表，它将被列出为已启用。但是，在顶部的菜单栏中，我有元素、控制台、源代码等，没有React选项卡。我可以打开我的一个反应-本机源文件，甚至停止在它的断点。
在react工具的自述中，它声明了
The "React" tab won't show up if React can't communicate with the devtools. When the page loads, the devtools sets a global named __REACT_DEVT
浏览 8提问于2016-03-11得票数 4
回答已采纳
我正在尝试将顶部栏添加到我的应用程序中，我已经有一个底部标签，但我发现添加顶部标签和底部标签很复杂。下面是我的代码： import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createMaterialTopTabNavigator } from '@react-navigation/m
浏览 17提问于2020-09-22得票数 0
回答已采纳
我需要使用react导航标签和tabBarComponent创建一个自定义的可滚动顶部选项卡栏，而不使用任何其他第三方库。 const TopTabBar = createMaterialTopTabNavigator({
Home: HomePage,
Entertainment: EntertainmentNews,
Business: BusinessStack,
Music: MusicStack,
Politics: PoliticsStack,
Sports: SportsStack,
Technology: Technol
浏览 6提问于2020-06-20得票数 1
1回答
我刚接触react-native，所以我认为"HTML“而不是"native”可能有点太多了，所以我的问题可能看起来很愚蠢。
我使用react- native -router-flux进行路由，而本地base则用于一些不错的组件。我也想使用原生基础的Header/Content/Footer，但我没有找到一种方法来让它工作。
为了拥有Header/Content/Footer，这些组件必须包装在Container组件中。我没有找到一种使用react-native-router-flux的方法。
我的头在导航栏周围，内容在每个场景组件中。
(对于标题，我做了一个自定义导航栏，它扩
浏览 0提问于2016-11-17得票数 3
2回答
我使用的是"native-base": "^2.1.3"和"react-native": "0.44.0"，我的选项卡的内容没有显示，我不知道如何解决这个问题。
import HomeTab from '../components/homeTab';
render() {
return (
<Drawer
ref={(ref) => { this._drawer = ref; }}
content={<Sidebar navigator={th
浏览 3提问于2017-05-25得票数 0
回答已采纳
我有一个带有React导航的React Native应用程序，我需要根据Redux状态显示或隐藏一个选项卡。我正在使用createBottomTabNavigator，并编写了以下代码：
function createTabNavigator(props:TabNavigatorProps){
debugger;
const isClient = WHAT_TO_PUT_HERE??
const tabs = isClient
? {
//something
}
: {
//something else
}
return createBotto
浏览 3提问于2019-08-28得票数 5
奇怪的是，react-native-vector-icons运行良好，但是在新版本的package.json文件中使用^ ("^6.6.0")来实现这个错误。
这很奇怪，因为两天前它运行得很好，但是现在我的项目开始时出现了以下错误：
错误:错误:无法从@react-native-community/toolbar-android中解析模块node_modules\react-native-vector-icons\lib\toolbar-android.js：@react本机-社区/工具栏-android无法在项目中找到。
浏览 11提问于2020-07-07得票数 36
回答已采纳
在构建自定义Tab.Screen时，我尝试传递一个自定义tabBarIcon。当图标呈现时，它将不会导航到组件TestScreen。在 for 中，我对Tab.Screen的理解应该是：
<Tab.Screen
name={routes.FOO}
component={TestScreen}
options={{
tabBarIcon: ({ focused }) => (
<TouchableOpacity>
<View style={styles.actionButton}>
<I
浏览 1提问于2021-10-25得票数 2
回答已采纳
我们的应用程序的功能是在主屏幕中显示底部的tabBar，并在用户导航到另一个屏幕时隐藏它(更改堆栈)，但是在从v3迁移到v4之后，安卓应用在打开屏幕时速度更慢，关闭屏幕的转换也比较慢，而且显然每次我导航到堆栈时，都会显示底部选项卡导航中存在的所有堆栈导航，即使没有导航到它。更糟糕的是，在制作应用程序有5个标签，并有一些动画在开幕。
如何解决这个动画片的跳跃问题呢？
在29 - Android 10上进行了测试。同样的问题也发生在Moto G7 Play，Android 10上。
以下是导航代码：
import React from 'react';
import {
浏览 1提问于2020-08-26得票数 0
回答已采纳
Elevation is here 我想要更改react导航底部选项卡栏的高程，我想更改底部选项卡栏的高度。
浏览 13提问于2020-08-08得票数 0
回答已采纳
我有一个react本机项目，在使用expo运行它时会收到以下错误：
(0 , _nativeStack.createStackNavigator) is not a function
Evaluating App.js
Loading App.js
我不确定这是依赖问题还是我的createStackNavigator的另一个问题，但我似乎无法消除这个错误。我试过清理缓存和所有东西。
App.js
import React from 'react';
import { ThemeProvider } from 'sty
浏览 3提问于2021-08-09得票数 0
回答已采纳
我正在ios应用程序中创建一个选项卡栏，我想尝试使用react-native-图标。
我按照上的步骤操作，自定义选项卡栏上的部分以：
var { TabBarIOS, } = require('react-native-icons');
我在模拟器中得到了下面的错误。它如何在require语句中解析此模块的路径？
我还注意到，在Libraries -> ReactNativeIcons.xcodeproj -> Products下的libReactNativeIcons.a是红色的，并且不存在。
有什么建议吗？
浏览 0提问于2016-01-13得票数 0
我目前正在开发一个适用于安卓和iOS的应用程序--我正在使用react native。有没有办法在react导航中动态隐藏导航栏，或者我应该切换到react本地路由器流量？当用户切换到横向时，我想隐藏导航栏，当他返回到纵向时，我想再次显示它。
我知道如何在导航选项中使用{header: null}静态更改它，但在这种情况下这对我没有帮助，至少我没有找到解决这个问题的方法。
提前感谢！
浏览 7提问于2018-02-27得票数 0
我尝试使用中的徽章，但元素不能正确地放入底部导航：
下面是来自AppNavigator.js的代码：
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
import { Badge, Icon, Avatar } from "react-native-material-ui";
export const SignedIn = createMaterialBottomTabNavigator(
{
MeetingsS
浏览 0提问于2018-11-02得票数 0
3回答
因为我对选项卡栏有一些要求，而普通iphone选项卡栏无法提供，所以我需要构建自己的选项卡。
构建我自己标签栏的最好方法是什么，特别是，如何在我的主视图控制器中以正确的方式添加/删除(显示/隐藏)视图，同时考虑到内存和子视图的最佳实践？
浏览 2提问于2011-02-06得票数 4
回答已采纳
我正在将我的项目从react-navigation-v4升级到react-navigation-v5。我需要在将屏幕分成两半的同一屏幕中有两个顶部栏，但是通过这样做，我得到了以下错误：
错误:已为此容器注册了另一个导航器。您可能在一个“导航容器”或“屏幕”下有多个导航器。确保每个导航器都在单独的“屏幕”容器下。
我搜索了很多，我知道我可以筑巢，但如何利用它们在一起呢？
这是我的代码，给出了错误：
import React from 'react';
import { NavigationContainer } from '@react-navigation/na
浏览 9提问于2020-05-23得票数 3
回答已采纳
1回答
我在我的React Native应用程序中遇到了相当奇怪的布局问题。我的布局主要基于flexbox，但在页边距、图像大小和选项卡栏高度方面有一些例外。在两个不同的模拟器上运行应用程序会导致不同的行为。在5S模拟器上，它看起来很棒。当在6SPlus模拟器上运行时，ListView中的一些行看起来很奇怪，标签栏边距/填充看起来也很奇怪(见附件截图)。有没有其他人遇到过这个问题，或者知道是什么导致了这个问题？
向约翰致敬
浏览 2提问于2016-01-07得票数 1
1回答
描述
在将本地版本升级到0-62.2之后，我遇到了许多问题。这是以下问题之一：
--我以这一页为参考，编辑了它
React原生版本：
反应-本机-cli: 2.0.1
反应-原生: 0.62.2
**Expected Results**
clang: error: linker command failed with exit code 1 (use -v to see invocation)
ld: library not found for -lRCTAnimation
warning: The iOS Simulator deployment target 'IPHONEOS_
浏览 2提问于2020-04-27得票数 2
回答已采纳
2回答
我正在用RN开发一个新的应用程序，并使用react导航库中的TabNavigator，这是TabNavigator只显示第一个标签的最基本的例子。我在某个地方读到过，它可能是一个bug，可以通过将react降级来解决--导航到1.0.3，但它对我没有用。如何解决这个问题？
app.js
import React, { Component } from 'react';
import Dashboard from './screens/Dashboard';
import Profile from './screens/Profile';
//
浏览 2提问于2018-04-22得票数 1
回答已采纳
我尝试使用反应-本机-路由器-流量在导航栏上的右按钮。
我的代码是
import React from 'React';
import { TouchableHighlight } from 'react-native';
import { Scene, Router, Actions } from 'react-native-router-flux';
...
const filterIcon = () => (
<TouchableHighlight onPress={()=>} style={{...}}>
<
浏览 1提问于2016-08-19得票数 1
回答已采纳
我想走出顶部选项卡导航，但它无法导航。它给出了一个错误，任何导航器都没有处理有效负载为{"name":"LoginPage"}的操作'NAVIGATE‘。
你有一个名为“LoginPage”的屏幕吗？
如果尝试在嵌套导航器中导航到屏幕，请参见
我也使用嵌套导航，但不是work。我的屏幕在下面
顶部选项卡导航屏幕
import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } f
浏览 23提问于2020-11-12得票数 1
回答已采纳
我想隐藏登录页面底部的选项卡栏，并将其显示在其他屏幕上，我如何实现这一点？现在在登录屏幕的底部有一个选项卡栏，我想要删除它并在我登录后显示它。如果有人知道怎么做，请帮助我。我从这个答案中得到了一些想法，，但我不知道如何检查用户是否登录！如何将其从我的登录屏幕传递到app.js？
这是我的app.js
import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer, createSwitchNavigator} from "react-navigation
浏览 0提问于2020-08-30得票数 0
2回答
我正在使用React Native创建一个移动应用程序，我决定使用来自网站'‘的导航栏，但我不知道如何在我的代码中使用它。
我想你给我发送的网站'‘的导航栏的例子。
浏览 4提问于2016-12-18得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
