react-native - 如何导入 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 文件包含不同的导航器，如 tab navigator、drawer navigator、stack navigator 等。那么如何一次尝试导入所有这些？

标签： react-nativereact-navigation

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 };