react-native - 如何在 react-navigation 中同时使用自定义 TabNavigator 和 StackNavigator

Question

我在使用 react-navigation 时遇到了一些问题。

我的导航路线:

StackNavigator: main app navigation
-- WelcomeScreen
-- GuideScreen 
-- TabNavigator: this is CustomTabs
 + MyHomeScreen
 + MyNotificationsScreen 
 + MySettingsScreen
-- OtherScreen.

我使用 createNavigator、createNavigationContainer 来构建我自己的导航。您可以在此处实时查看自定义选项卡:https://snack.expo.io/rJnUK4nrZ

import React from 'react';
import {
  Button,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import {
  createNavigator,
  createNavigationContainer,
  TabRouter,
  addNavigationHelpers,
} from 'react-navigation'; // 1.0.0-beta.11

const SampleText = ({ children }) => (
  <Text style={styles.sampleText}>{children}</Text>
);

const MyNavScreen = ({ navigation, banner }) => (
  <ScrollView>
    <SampleText>{banner}</SampleText>
    <Button
      onPress={() => {
        navigation.goBack(null);
      }}
      title="Go back"
    />
  </ScrollView>
);

const MyHomeScreen = ({ navigation }) => (
  <MyNavScreen banner="Home Screen" navigation={navigation} />
);

const MyNotificationsScreen = ({ navigation }) => (
  <MyNavScreen banner="Notifications Screen" navigation={navigation} />
);

const MySettingsScreen = ({ navigation }) => (
  <MyNavScreen banner="Settings Screen" navigation={navigation} />
);

const CustomTabBar = ({ navigation }) => {
  const { routes } = navigation.state;
  return (
    <View style={styles.tabContainer}>
      {routes.map(route => (
        <TouchableOpacity
          onPress={() => navigation.navigate(route.routeName)}
          style={styles.tab}
          key={route.routeName}
        >
          <Text>{route.routeName}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

const CustomTabView = ({ router, navigation }) => {
  const { routes, index } = navigation.state;
  const ActiveScreen = router.getComponentForState(navigation.state);
  return (
    <View style={styles.container}>
      <CustomTabBar navigation={navigation} />
      <ActiveScreen
        navigation={addNavigationHelpers({
          ...navigation,
          state: routes[index],
        })}
      />
    </View>
  );
};

const CustomTabRouter = TabRouter(
  {
    Home: {
      screen: MyHomeScreen,
      path: '',
    },
    Notifications: {
      screen: MyNotificationsScreen,
      path: 'notifications',
    },
    Settings: {
      screen: MySettingsScreen,
      path: 'settings',
    },
  },
  {
    // Change this to start on a different tab
    initialRouteName: 'Home',
  }
);

const CustomTabs = createNavigationContainer(
  createNavigator(CustomTabRouter)(CustomTabView)
);

const styles = StyleSheet.create({
  container: {
    marginTop: Platform.OS === 'ios' ? 20 : 0,
  },
  tabContainer: {
    flexDirection: 'row',
    height: 48,
  },
  tab: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    margin: 4,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 4,
  },
  sampleText: {
    margin: 14,
  },
});

export default CustomTabs;

在 App.js 中

import { connect } from "react-redux";
import { addNavigationHelpers, StackNavigator } from "react-navigation";
import Welcome from "@components/WelcomeScreen";
import Welcome from "@components/GuideScreen";
import Welcome from "@components/OtherScreen";

// import CustomTabs 

export const AppNavigator = StackNavigator(
  {
    Welcome: { screen: WelcomeScreen },
    Guide: { screen: GuideScreen },
    Home: { screen: CustomTabs }, // I want to use CustomTabs TabNavigation here?
    Other: { screen: OtherScreen },
  },
  {
    initialRouteName: "Welcome",
    headerMode: "none"
  }
);

const Routes= ({ dispatch, nav }) => (
  <AppNavigator navigation={addNavigationHelpers({ dispatch, state: nav })} />
);

const mapStateToProps = state => ({
  nav: state.nav
});

const mapDispatchToProps = dispatch => ({
  dispatch
});

export default connect(mapStateToProps, mapDispatchToProps)(AppWithNavigationState);

如何将我的自定义 TabNavigator 添加到主 StackNavigator？

我做错了什么？该应用程序与 redux、saga 集成。如果您有其他关于使用 react-navigation 自定义堆栈和选项卡的示例，请给我引用。

Answer 1

更新您的代码:

import Tab1Screen from "@components/Tab1Screen" 
import Tab2Screen from "@components/Tab2Screen" 
export const AppNavigator = StackNavigator(
  {
    Welcome: { screen: WelcomeScreen },
    Guide: { screen: GuideScreen },
    Home: { 
        screen: TabNavigator(
             {
               Tab1Screen: {screen: Tab1Screen},
               Tab2Screen: {screen: Tab2Screen}
             },{
                tabBarPosition: "bottom"
             })
    }, 
    Other: { screen: OtherScreen },
  },
  {
    initialRouteName: "Welcome",
    headerMode: "none"
  }
);