标签: react-native-tabnavigator

我正在使用 React Native 开发一个移动应用程序，并在其中使用 Tab.Navigator - Tab.Screen 组件。在导航器中，我使用initialRouteName、tabBarOptions和screenOptions属性。在 javaScript 找到screenOptions之前，其他属性一切正常。然后它给我警报：

// Place the following in 'screenOptions' in your code to keep current behavior:

{
   "tabBarStyle": [
    {
      "display": "flex"
    },
    null
   ]
}

有关更多详细信息，请参阅https://reactnavigation.org/docs/bottom-tab-navigator#options。

我已经在我的代码中做到了：

const App = () => {
     return (
       <>
      <NavigationContainer>
        <Tab.Navigator
          initialRouteName='ExerciseScreensStack'
          tabBarOptions={{
            tabBarActiveTintColor: '#efb810',
            tabBarInactiveTintColor: 'black'
          }}
          screenOptions = {({ route }) =>({
            tabBarStyle: [
              {
                display: "flex"
              },
              null
            ],
        tabBarIcon: ({ color …

在我的本机项目中，我使用了DrawerNavigator，从中我导航到SwitchAccount页面。在SwitchAccount页面中，我使用了react-native-tabs中的Tabs。下面是我使用的代码

    render() {
      return (
     <View style={[styles.container]}>
      // Here _renderTab function return component based on selectedService
      {this._renderTab(this.state.selectedService)} 
      <TabBarContainer
          selectedService={this.state.selectedService}
          onTabChange={this._switchService}
        />
     </View>
    ); 
  }

当我单击选项卡时，它会更改状态，然后获得_renderTab函数返回的新组件。一切正常，但我想基于_renderTab函数返回的组件更改Header标题。我该怎么办？有什么办法可以从构造函数更改标题标题吗？以下是我在SwitchAccount页面中的navigationOptions的代码。在那里，我想从构造函数更改标题。

    static navigationOptions = {
    title:'Filter',
    drawerLabel: 'Switch Account',
    drawerIcon: ({ tintColor }) => (
      <Icon
        name='md-switch'
        size={40}
        color='black'
      />
    ),
  };

我在 linux 机器上安装了 react native。我想在我的练习代码中实现 createBottomTabNavigator。我在其中创建了 5 个文件夹和 index.js。导航.js：

import {createAppContainer} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';

import Profile from './common/pages/profile';
import Home from './common/pages/home';
import Search from './common/pages/search';
import Camera from './common/pages/camera';
import Notification from './common/pages/notification';

const Navigate=createBottomTabNavigator({
    Profile:{screen:Profile},
    Home:{screen:Home},
    Camera:{screen:Camera},
    Search:{screen:Search},
    Notification:{screen:Notification}
});
export default createAppContainer(Navigate);

和主要的 index.js：

import {AppRegistry} from 'react-native';
import Navigate from './navigate';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => Navigate);

现在当我在 genymotion 中运行时出现错误：

• null 不是一个对象“正在评估 _ReanimatedModule.default.configureProps”

我的 package.json：

{
  "name": "myinstagram",
  "version": …

根据标题，我想从子组件中隐藏父堆栈导航器的标题，这是因为在某些屏幕上我想保留父标题，而在某些屏幕上我不想保留父标题。

我知道可以简单地在父 Stack Navigator 中将标头属性设置为 null，但是有什么方法可以在运行时从子组件更改该属性吗？

这是导航器的层次结构：

ParentStackNavigator
|
|__TabNavigator
   |__Other Screen
   |__MainScreen (Stack Navigator)
      |
      |__ScreenWithHeader
      |__ScreenWithoutHeader
         

挑战是当我在 ScreenWithoutHeader 中时隐藏 ParentStackNavigator 中的标头，而不是当我在 ScreenWithHeader 中时隐藏标头。我能想到的一个解决方案是用上下文包装整个事情，但我希望有更好的方法。

我希望能够减少顶部导航栏中指示器样式的宽度以实现以下结果：

但每当我尝试减小栏的宽度时，我都无法将其正确居中。这是我目前拥有的；

下面是我的代码：

import React from 'react';
import { createAppContainer } from 'react-navigation';
import {createMaterialTopTabNavigator } from 'react-navigation-tabs';
import Colors from '../constants/Colors';
import Tab1 from '../screens/tab1';
import Tab2 from '../screens/tab2';


const HomeTab = createMaterialTopTabNavigator({
    TAB1: Tab1,
    TAB2: Tab2,
  }, 
  {
    tabBarOptions: {
        activeTintColor: 'black',
        inactiveTintColor: 'gray',
        labelStyle: { fontSize: 14, fontWeight:"700" },
        style: { backgroundColor: Colors.mainBackground, elevation: 0, shadowOpacity: 0, borderBottomWidth:2, borderColor:'#ccc' },
        indicatorStyle: { backgroundColor: 'blue', width:100},

    },
  }

);

感谢您的帮助！真的很感激:)

如何删除反应导航顶部栏中选项卡之间的空白。所以应该发生的是选项卡大小应该根据屏幕大小进行调整。

这就是我的导航目​​前的样子。

您可以看到选项卡非常大。它们占用了太多空间。我怎样才能获得这些空白，以便选项卡只占用足够的大小来适合选项卡名称。

我尝试过造型Tab.Navigator但没有成功。例如，我尝试过以下操作：

<Tab.Navigator
      initialRouteName="All"
      tabBarOptions={{
        scrollEnabled: true,
        labelStyle: { padding: 0, margin: 0, border: 0 },
        tabStyle: { padding: 0, margin: 0, border: 0 },
      }}
      lazy={true}
      style={{ padding: 0, margin: 0, border: 0 }}
    >

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";

import Home from "../screens/Home";

const Tab = createMaterialTopTabNavigator();
const Stack = createStackNavigator();

const HomeTabNavigation = () => {
  return (
    <Tab.Navigator
      initialRouteName="All"
      tabBarOptions={{
        scrollEnabled: …

当我用...运行模拟器时

react-native run-ios

...我在终端中看到一条消息，指出“ TabNavigator已过时。请使用createBottomTabNavigator ...”

但是，我不认为TabNavigator已被弃用，我也不认为createBottomTabNavigator存在于Web或现实中。除此之外，一切都很好！除了我无法运行我的应用程序。因为我收到此红屏错误，提示React Navigation出现了问题：

undefined is not a function (near '...(0 , _reactNavigation.TabNavigator)...')

其他情况：在我弹出一个expo应用程序之后，这些问题开始出现，然后尝试通过创建一个新应用程序（create-react-native-app）并将其自定义代码移至新应用，从git commit弹出之前。我还必须在模拟器中更新Expo客户端。我不确定这是否是相关信息，但是在退出之前，我没有看到此消息，表明不推荐使用TabNavigator。

React Navigation文档没有暗示可能不推荐使用TabNavigator：https : //reactnavigation.org/docs/tab-based-navigation.html

这是终端输出，其中包含一条消息，指示已弃用TabNavigator：

我有一个使用Ignite CLI. 我正在尝试将 TabNavigator 与 React Navigation 结合使用，但我似乎无法弄清楚如何将数据从一个屏幕传递到另一个屏幕。我见过的所有示例通常都显示了如何在点击按钮并使用该onPress功能时传递数据，但在我的情况下，我需要/想要在我实际点击其中一个选项卡按钮时传递数据，但我还没有找到有关如何执行此操作的解释，至少是我理解的解释。

我有两个用户将与之交互的屏幕SearchScreen和WatchScreen。这两个屏幕由AppNavigation.js文件中的 TabNavigator 控制。所以总共有 3 个文件AppNavigation.js，SearchScreen.js和WatchScreen.js.

AppNavigation.js

import { StackNavigator,TabNavigator } from 'react-navigation'
import SearchScreen from '../Containers/SearchScreen'
import WatchScreen from '../Containers/WatchScreen'
import SearchWatch from '../Containers/SearchWatch'
import LaunchScreen from '../Containers/LaunchScreen'
import styles from './Styles/NavigationStyles'

const PrimaryNav = TabNavigator({
  Search: { screen: SearchScreen },
  Watch: { screen: WatchScreen }
}, {
  initialRouteName: 'Search',
  lazy: true,

})
export default PrimaryNav …

我目前收到错误消息，屏幕“主页”的“组件”道具的值无效。它必须是一个有效的 React 组件。'' 我正在尝试将选项卡导航器链接到一系列不同的屏幕。请参阅下面的代码并提前致谢。我显然是初学者哈哈

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import { create } from 'react-test-renderer';
import HomePage from './Screen/Home'
import FuturePage from './Screen/Future'

const Tabs=createBottomTabNavigator();

export default function App (){

    return (  
      <NavigationContainer>
       <Tabs.Navigator>
        <Tabs.Screen name='Home' component={HomePage} />
         <Tabs.Screen name='Future' component={FuturePage} />
      </Tabs.Navigator>
    </NavigationContainer>
        );
    }

主页屏幕

import React, { Component } …