标签: react-native-tabnavigator

我正在使用 create-react-native-app 并使用带有 createBottomTabNavigator 函数的 StackNavigator。这些图标是通过一个单独的组件设计的，但我在设计导航器的其余部分时遇到了麻烦。

我创建了这些我想使用的选项：

  tabBarOptions: {
    showLabel: false,
    style: {
      backgroundColor: Colors.greyGreen
    }
  }

希望这对某人来说非常明显，并希望得到帮助！我尝试将选项放在下面代码中的各个位置（两个地方都不起作用）：

const config = Platform.select({
  web: { headerMode: 'screen' },
  default: {},
  // TRIED PLACING THE OPTIONS HERE
});

const HomeStack = createStackNavigator(
  {
    Home: HomeScreen,
  },
  config
);
HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-information-circle${focused ? '' : '-outline'}`
          : 'md-information-circle'
      }
    />
  ),
};
HomeStack.path = '';

const LinksStack …

据我所知，如果我将第二页设为选项卡，则底部选项卡将呈现。虽然，我不想将其作为单独的选项卡，但我只是希望底部选项卡能够在所有屏幕上呈现。

我在这里做了一个这个小吃的复制品

另外，为什么当我将其设置为 false 时会显示标题？

我正在使用 expo v27.0，响应本机 0.55，正如您在图片中看到的那样，选项卡具有固定的宽度，例如选项卡导航中的默认宽度，并且文本换行为三行，我希望文本为在 1 行和 nowrap 中，我尝试过 TabStyle 中的样式 (flexWrap: 'nowrap', flex: 1)，TabBarOptions 中的 LabelStyle，但仍然无法根据选项卡内的文本使选项卡具有宽度。

我使用 fetch 从 json 动态填充选项卡的文本，因此所有选项卡将根据文本具有不同的宽度。如何使选项卡跟随文本的宽度？

非常欢迎所有答案。先感谢您。

我正在从反应导航中使用TabNavigator来浏览3个组件。我的TabNavigator组件如下所示：

import routeOnMap from '../screens/routsOnMap.js';
import meditatinWalk from '../screens/meditationWalk.js';
import newWordToWalkOn from '../screens/newWordToWalkOn.js';
import * as firebase from 'firebase';

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

import {
  StackNavigator,
  NavigationActions,
  TabNavigator,
  TabBarBottom,
} from 'react-navigation';

import Ionicons from 'react-native-vector-icons/Ionicons';

export default TabNavigator(
{
  MeditatinWalk: { screen: meditatinWalk },
  NewWordToWalkOn: { screen: newWordToWalkOn },
  RouteOnMap: { screen: routeOnMap },

},
{
  navigationOptions: ({ navigation }) => ({
    tabBarIcon: ({ focused, tintColor …