Question

我试图将选项卡导航器嵌入到抽屉式导航器中，但是抽屉式导航器有时会停止工作。代码：https://github.com/myplaceonline/testreactexpo/tree/drawernestedtabs

重现该问题：

点击底部的Screen2标签
打开抽屉
点击主页
打开抽屉
点击Screen2
什么都没发生

是否有更好的方法来保持抽屉和底部卡舌同步，并避免抽屉停止工作的问题？

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {
  createAppContainer,
  createBottomTabNavigator,
  createDrawerNavigator,
  createStackNavigator,
  NavigationActions,
  DrawerActions,
} from 'react-navigation';
import { Ionicons } from '@expo/vector-icons';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#ffffff",
    alignItems: "center",
    justifyContent: "center",
  },
});

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: "Home",
  };
  render() {
    return (
      <View style={styles.container}>
        <Text>Home</Text>
      </View>
    );
  }
}

class Screen2Screen extends React.Component {
  static navigationOptions = {
    title: "Screen2",
  };
  render() {
    return (
      <View style={styles.container}>
        <Text>Screen2</Text>
      </View>
    );
  }
}

const AppScreensTabs = {
  Home: HomeScreen,
  Screen2: Screen2Screen,
};

const AppScreensTabOptions = {
  tabBarOptions: {
    showLabel: true,
  },
  defaultNavigationOptions: ({ navigation }) => ({
    tabBarIcon: ({ focused, horizontal, tintColor }) => {
      const { routeName } = navigation.state;
      let iconName;

      // https://expo.github.io/vector-icons/
      if (routeName === "Home") {
        iconName = "md-home";
      } else if (routeName === "Screen2") {
        iconName = "md-beer";
      }

      return <Ionicons name={iconName} size={25} color={tintColor} />;
    },
  }),
};

const AppScreens = {
  TabHome: createBottomTabNavigator(
    AppScreensTabs,
    Object.assign(
      { initialRouteName: "Home" },
      AppScreensTabOptions,
    )
  ),
  TabScreen2: createBottomTabNavigator(
    AppScreensTabs,
    Object.assign(
      { initialRouteName: "Screen2" },
      AppScreensTabOptions,
    )
  ),
};

const AppScreensStackNavigationOptions = {
  defaultNavigationOptions: ({ navigation }) => ({
    headerLeft: <Ionicons name="md-menu" size={25} onPress={ () => navigation.openDrawer() } style={{ marginLeft: 15 }} />
  })
};

const AppDrawer = createAppContainer(createDrawerNavigator({
  DrawerHome: {
    screen: createStackNavigator(
      AppScreens,
      Object.assign(
        { initialRouteName: "TabHome" },
        AppScreensStackNavigationOptions,
      )
    ),
    navigationOptions: {
      drawerLabel: "Home",
    }
  },
  DrawerScreen2: {
    screen: createStackNavigator(
      AppScreens,
      Object.assign(
        { initialRouteName: "TabScreen2" },
        AppScreensStackNavigationOptions,
      )
    ),
    navigationOptions: {
      drawerLabel: "Screen2",
    }
  },
}));

export default class App extends React.Component {
  render() {
    return (
      <AppDrawer />
    );
  }
}

<div data-snack-id="@git/github.com/myplaceonline/testreactexpo@drawernestedtabs" data-snack-platform="ios" data-snack-preview="true" data-snack-theme="light" style="overflow:hidden;background:#fafafa;border:1px solid rgba(0,0,0,.08);border-radius:4px;height:505px;width:100%"></div>
<script async src="https://snack.expo.io/embed.js"></script>

Answer 1

似乎您正在尝试使抽屉状态和选项卡状态保持同步，但是我认为从UX的角度来看，将它们视为独立的导航容器（每个容器具有各自的导航层次结构）可能更有意义。使用react-navigation使其保持同步不是直截了当的，而且我认为这不是人们在通过您的应用程序进行导航时会熟悉的模式。

嵌套的标签导航器在抽屉式导航器中不起作用

1 个答案: