Question

我想根据启用的功能来更改屏幕底部的选项卡。此功能列表是通过登录API调用填充的。

目前，我有以下内容：

const TabRouteConfig = {
  Home: DashboardScreen,
  FeatureA: FeatureA,
  FeatureZ: FeatureZ,
};

const TabNavigatorConfig = {
  initialRouteName: 'Home',
  order: [
    'Home',
    'Feature A',
  ],
  tabBarPosition: 'bottom',
  lazy: true,
};

const TabNavigator1 = createBottomTabNavigator(
  TabRouteConfig,
  TabNavigatorConfig,
);

// Set the tab header title from selected route
// https://reactnavigation.org/docs/en/navigation-options-resolution.html#a-stack-contains-a-tab-navigator-and-you-want-to-set-the-title-on-the-stack-header
TabNavigator1.navigationOptions = ({ navigation }) => {
  const { index, routes } = navigation.state;
  const { routeName } = routes[index];

  return {
    headerTitle: routeName,
  };
};

const TabNavigator2 = createBottomTabNavigator(
  TabRouteConfig,
  {
   ...TabNavigatorConfig,
   order: [
      'Home',
      'Feature Z',
   ]

);

TabNavigator2.navigationOptions = TabNavigator1.navigationOptions;

const Stack = createStackNavigator({
  Main: {
    screen: props => (props.screenProps.hasFeature ?
      <TabNavigator1 /> : <TabNavigator2 />
    )
  },
})

const WrappedStack = props => (
  <View style={styles.container}>
    <Stack
      screenProps={{ hasFeature: props.hasFeature }}
    />
  </View>
);

const mapStateToProps = (state, props) => {
  return {
    ...props,
    hasFeature: state.hasFeature,
  };
};

export default connect(mapStateToProps, null)(WrappedStack);

大多数情况下有效-它基于TabNavigator1在TabNavigator2和hasFeature之间动态切换，但是不再支持TabNavigators上的navigationOptions和{{1 }}未设置。

有更好的方法吗？

Answer 1

同时渲染多个导航器是一种反模式，因为这些导航器的导航状态将完全分离，并且您将无法导航到另一个导航器。

您可以使用builder.streamingConfig = StreamingRecognitionConfig.newBuilder() .setConfig(RecognitionConfig.newBuilder() .setLanguageCode("en-US") .setEncoding(RecognitionConfig.AudioEncoding.AMR_WB) .setSampleRateHertz(16000) .build()) .setInterimResults(true) .setSingleUtterance(false) .build()选项来实现所需的功能。希望您能从下面的示例中得到灵感：

tabBarComponent

注意：

您不必单独安装import { createBottomTabNavigator, BottomTabBar } from 'react-navigation-tabs'; const TabNavigator = createBottomTabNavigator( TabRouteConfig, { tabBarComponent: ({ navigation, ...rest }) => { const filteredTabNavigatorRoutes = navigation.state.routes.filter(route => isRouteAllowed(route)); return ( <BottomTabBar {...rest} navigation={{ ...navigation, state: { ...navigation.state, routes: filteredTabNavigatorRoutes }, }} /> ); }, }, );。它是随react-navigation-tabs 2.0.0+一起自动安装的。
react-navigation是根据是否显示该路由返回isRouteAllowed或true的函数。确保只检查该对象中的顶层路线。
false应该包含所有可能的选项卡，并且此逻辑仅可视地从TabBar隐藏路由。因此，您仍然可以以编程方式导航到所有路线。因此，您可能需要在每个屏幕中使用其他逻辑来决定是否基于TabRouteConfig呈现它们。

通过带有navigationOptions

1 个答案: