如何在另一个屏幕中导出Appcontainer和Import？

Question

我的主要应用程序是关于底部选项卡navigator.on我使用5个屏幕。从5屏幕的一个屏幕我需要使用createstacknavigator，我需要导出该appcontainer类并在主屏幕中导入它不导出该类，说undefined不是一个函数（评估，（0，b.createAppcontainer）（D）'） enter code here

./createStacknavigator
import React from 'react';
import { View, Text, Button } from 'react-native';
import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation'; // Version can be specified in package.json

 class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => {
            this.props.navigation.dispatch(StackActions.reset({
              index: 0,
              actions: [
                NavigationActions.navigate({ routeName: 'Details' })
              ],
            }))
          }}
        />
      </View>
    );
  }  
}

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
      </View>
    );
  }  
}

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
  Details: {
    screen: DetailsScreen,
  },
}, {
    initialRouteName: 'Home',
});

export default createAppContainer(AppNavigator);

在MainScreen页面中

./Mainscreen
    ...
    import AppNavigator from './components/createStacknavigator.js';

我的错误是：undefined不是一个函数（评估，（0，b.createAppcontainer）（D）'）

Answer 1

您可以像下面这样使用createAppContainer：

import React from 'react';

import {
  createBottomTabNavigator,
  createStackNavigator,
  createSwitchNavigator,
  createAppContainer
} from 'react-navigation';

const onTabTap = (n) => {
  ReactNativeHapticFeedback.trigger('selection', false);
  n.defaultHandler();
};

const TabNavigator = createBottomTabNavigator({
  Home: {
    screen: Jobs,
    navigationOptions: () => ({
      tabBarOnPress: onTabTap
    })
  },
  Calendar: {
    screen: Calendar,
    navigationOptions: () => ({
      tabBarOnPress: onTabTap
    })
  }
},
{
  defaultNavigationOptions: ({ navigation }) => ({
    tabBarIcon: ({ focused }) => {
      const { routeName } = navigation.state;
      let IconComponent = CONST.IC_HOME;
      if (routeName === CONST.MENU_HOME) {
        IconComponent = focused ? CONST.IC_HOME_SELECTED : CONST.IC_HOME;
      } else if (routeName === CONST.MENU_CALENDAR) {
        IconComponent = focused ? CONST.IC_CALENDAR_SELECTED : CONST.IC_CALENDAR;
      } 
      return IconComponent;
    }
  }),
  tabBarOptions: {
    activeTintColor: 'red',
    inactiveTintColor: 'black',
  },
});

const DashBoardStack = createStackNavigator({
  DashBoard: TabNavigator
}, {
  mode: 'modal',
  headerMode: 'none',
});


const App = createSwitchNavigator({
  App: DashBoardStack
},
{
  initialRouteName: 'App'
});

const AppContainer = createAppContainer(App);


class App extends React.Component {
render() {
return (
    <React.Fragment>
      <AppContainer />
    </React.Fragment>
);
  }

}

export default App;