Как импортировать родные навигаторы React?

Question

Я определил все навигаторы в файле navigator.js. Я хочу импортировать это. Как мне сделать это без каких-либо ошибок? Это мой файл navigator.js.

    import React, {Component} from 'react';

import {
  Platform, 
  View, 
  Button, 
  SafeAreaView,
} from 'react-native';

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


/** NAVIGATORS DEFINED **/
const WelcomeTabNavigator = createBottomTabNavigator({
  Welcome: {screen: WelcomeScreen},
  Profile,
  Settings,
}, 
{
  tabBarOptions: {
    activeTintColor: '#fb9800',
    inactiveTintColor: '#7e7b7b',
    style: { height: 40,backgroundColor: '#fff',borderTopWidth:0.5,borderTopColor: '#7e7b7b' },
    labelStyle: {fontSize: 20}
  },
  navigationOptions:({navigation}) => {
    const {routeName} = navigation.state.routes[navigation.state.index];
    return {
      headerTitle: routeName
    };
  }

})

const WelcomeStackNavigator = createStackNavigator({
  WelcomeTabNavigator: WelcomeTabNavigator
},
{
  defaultNavigationOptions:({navigation}) => {
    return {
      headerLeft: (
        <Icon 
          style={{paddingLeft: 20}}
          onPress={() => navigation.openDrawer()}
          name="md-menu" 
          size={30}
        />
      )
    };
  }
})

const AppDrawerNavigator = createDrawerNavigator({
  Welcome: {screen: WelcomeStackNavigator},
},
{
  contentComponent:(props) => (
    <View style={{flex:1}}>
        <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
            <DrawerItems {...props} />
            <Button 
              title="Logout" 
              onPress={() => {

                props.navigation.navigate('Home')
              }}
            />
        </SafeAreaView>
    </View>
  ),
  drawerOpenRoute: 'DrawerOpen',
  drawerCloseRoute: 'DrawerClose',
  drawerToggleRoute: 'DrawerToggle'
})

const AppStackNavigator = createStackNavigator({
  Home: {screen: HomeScreen},
  Welcome: {screen: AppDrawerNavigator}
});

const AppContainer = createAppContainer(AppStackNavigator);

Это мой файл app.js

    import React, {Component} from 'react';

import {
  Platform, 
  View, 
  Button, 
  SafeAreaView,
} from 'react-native';

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

import Icon from 'react-native-vector-icons/Ionicons';


import HomeScreen from './screens/HomeScreen.js';
import WelcomeScreen from './screens/WelcomeScreen.js';
import Profile from './screens/ProfileScreen.js';
import Settings from './screens/SettingsScreen.js';


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

export default App;

Это мой файл index.js

    import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

Я хочу знать, как импортировать файл navigator.js и соединить эти 3 файла. Мой файл navigator.js содержит различные навигаторы, такие как навигатор по вкладкам, навигатор по ящикам, навигатор по стеку и т. Д. Так как я могу импортировать все это за одну попытку?

Answer 1

Я хотел бы рассказать вам очень простой способ обновить использовать навигацию.

Ниже приведен пример вашего index.js файла

    import React, { Component } from 'react';
    import { StyleSheet, View } from 'react-native';

    import { Main } from './navigation/Main';

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
      },
    });

    export class App extends Component {
      render() {
        return (
          <View style={ styles.container }>
            <Main />
          </View>
        );
      }
    }

Тогда вот ваш Main.js , который является вашим классом навигации. Вы можете объявить весь свой экран здесь.

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

    import { FirstScreen } from '../screens/FirstScreen';
    import { SecondScreen } from '../screens/SecondScreen';

    const RootStack = createStackNavigator({
      FirstScreen: {
        screen: FirstScreen,
        key: 'FirstScreen',
        navigationOptions: {
          gesturesEnabled: false,
        },
      },
      SecondScreen: {
        screen: SecondScreen,
        key: 'SecondScreen',
        navigationOptions: {
          gesturesEnabled: false,
        },
      },
    });

    export const Main = createAppContainer(RootStack);

Теперь вы можете просто перемещаться с одного экрана на другой.

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

class FirstScreen extends Component {
  onGetStarted() {
    const { navigate } = this.props.navigation;

    navigate('SecondScreen');
  }

  render() {
    return (
      <View style={ styles.container }>
        <TouchableOpacity
          style={ styles.welcome }
          onPress={ () => this.onGetStarted() }
        >
          <Text>
            Welcome to React Native!
          </Text>
        </TouchableOpacity>
        <Text style={ styles.instructions }>This is screen 1</Text>
      </View>
    );
  }
}

export { FirstScreen };

Answer 2

Вы можете объединить все навигаторы на одной странице, если вы импортируете все страницы.

import WelcomeScreen from './WelcomeScreen.js', 
import ProfileScreen from './ProfileScreen.js',
import SettingsScreen from './SettingsScreen.js',
import LogoutScreen from './LogoutScreen.js',

const WelcomeTabNavigator = createBottomTabNavigator({
  Welcome: {screen: WelcomeScreen,},
  Profile: {screen: ProfileScreen,},
  Settings: {screen: SettingsScreen,},
},

const WelcomeStackNavigator = createStackNavigator({
  Home: {screen: WelcomeTabNavigator,},
  Logout: {screen: LogoutScreen,},
})

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

export default App;