Как экспортировать Appcontainer и импортировать на другую экранную страницу?

Question

мое основное приложение о нижней вкладке navigator.on, что у меня есть 5 экранов.один экран из 5-го экрана, который мне нужно использовать createtacknavigator, и мне нужно экспортировать этот класс 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
    ...
    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;