React Native导航配置指南：使用React Navigation详解

React Native配置导航：使用React Navigation

在React Native开发中，导航是构建移动应用的核心部分。官方推荐的导航库是React Navigation，它支持多种导航模式，如底部标签导航和堆栈导航。本文将详细介绍如何从零开始配置React Navigation，以实现一个完整的导航系统。

初始化React Native项目

首先，确保已经配置好React Native开发环境。使用脚手架创建一个新的React Native项目。构建完成后，进入项目目录并运行react-native run-ios或react-native run-android命令来启动项目。编译完成后，应用将自动安装在模拟器或真机上。在开发过程中，可以启用热重载以提升效率。

配置React Navigation

在项目根目录的package.json文件中，包含了项目的基本信息和依赖。初始依赖通常包括React和React Native。接下来，使用npm或yarn安装React Navigation库。

执行以下命令安装React Navigation：

yarn add react-navigation

或者使用npm：

npm install react-navigation

安装完成后，package.json的dependencies对象将新增React Navigation依赖，例如：

"dependencies": {
  "react": "16.4.1",
  "react-native": "0.56.1",
  "react-navigation": "^2.13.0"
}

编写导航器

为了保持代码结构清晰，建议在项目根目录下创建src文件夹，并将App.js文件移动到src目录下。同时，在src/screens/目录中创建两个页面组件：HomePage.js和MinePage.js。

首先，修改index.js文件以正确引用App组件：

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

AppRegistry.registerComponent(appName, () => App);
console.disableYellowBox = true;

接下来，创建HomePage.js页面组件。该组件包括一个静态导航选项和一个按钮，用于跳转到其他页面：

import React, {PureComponent} from 'react';
import {StyleSheet, Text, View, Button} from 'react-native';

class HomePage extends PureComponent {
    static navigationOptions = {
        title:'首页',
    };

    render() {
        return (
            <View>
                <Text>HomePage</Text>
                <Button style={styles.btn} title='跳转' onPress={() => {
                    this.props.navigation.navigate('NoticePage');
                }} />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    btn: {
        backgroundColor:'pink'
    }
});

export default HomePage;

然后，创建MinePage.js页面组件，用于个人中心页面：

import React, {PureComponent} from 'react';
import {Text, View} from 'react-native';

class MinePage extends PureComponent {
    static navigationOptions = {
        title:'个人中心',
    };

    render() {
        return (
            <View>
                <Text>MinePage</Text>
            </View>
        );
    }
}

export default MinePage;

配置底部导航和堆栈导航

在App.js文件中，引入必要的组件和页面，并配置TabNavigator作为底部导航，以及StackNavigator作为堆栈导航。

首先，定义底部导航TabNavigator，设置标签页的图标和样式：

import React from 'react';
import {StyleSheet, Image} from 'react-native';
import {TabNavigator, StackNavigator} from 'react-navigation';
import HomePage from './screens/HomePage/HomePage';
import MinePage from './screens/MinePage/MinePage';

const Tabbar = TabNavigator({
  HomePage: {
    screen: HomePage,
    navigationOptions: {
      tabBarIcon: ({tintColor}) => <Image style={[styles.icon, {tintColor: tintColor}]} source={require('./assets/tarbar/index.png')} />
    }
  },
  MinePage: {
    screen: MinePage,
    navigationOptions: {
      tabBarIcon: ({tintColor}) => <Image style={[styles.icon, {tintColor: tintColor}]} source={require('./assets/tarbar/mine.png')} />
    }
  }
}, {
  animationEnabled: false,
  tabBarPosition: 'bottom',
  swipeEnabled: false,
  backBehavior: 'none',
  tabBarOptions: {
    activeTintColor: '#4d4d4d',
    inactiveTintColor: '#b2b2b2',
    showIcon: true,
    pressColor: 'antiquewhite',
    style: {
      backgroundColor: '#fff',
      height: 60
    },
    indicatorStyle: {
      height: 0
    },
    labelStyle: {
      fontSize: 10,
      paddingTop: 0,
      marginTop: 0
    }
  }
});

const styles = StyleSheet.create({
  icon: {
    width: '45%',
    height: 25,
    zIndex: -1,
    marginTop: 0
  }
});

export default Tabbar;

然后，在StackNavigator中集成底部导航和其他页面，以支持页面间的跳转。修改App.js以定义堆栈导航：

import {StackNavigator} from 'react-navigation';
import Tabbar from './Tabbar';
import HomePage from './screens/HomePage/HomePage';
import MinePage from './screens/MinePage/MinePage';
import NoticePage from './screens/NoticePage/NoticePage';

const App = StackNavigator({
  Tabbar: {screen: Tabbar},
  HomePage: {screen: HomePage},
  MinePage: {screen: MinePage},
  NoticePage: {screen: NoticePage}
});

export default App;

实现堆栈导航跳转

为了演示堆栈导航，创建一个NoticePage.js页面组件：

import React, {PureComponent} from 'react';
import {Text, View} from 'react-native';

class NoticePage extends PureComponent {
    static navigationOptions = {
        title:'通知',
    };

    render() {
        return (
            <View>
                <Text>NoticePage</Text>
            </View>
        );
    }
}

export default NoticePage;

在HomePage.js中，通过按钮的onPress事件触发导航到NoticePage：

<Button title='跳转' onPress={() => { this.props.navigation.navigate('NoticePage'); }} />

这样，当用户点击按钮时，应用将从首页跳转到通知页面，实现了堆栈导航的效果。

总结

通过以上步骤，我们成功配置了React Navigation在React Native项目中的基本导航功能，包括底部标签导航和堆栈导航。这为构建复杂的移动应用界面提供了基础。在实际开发中，可以根据需求扩展更多导航模式和自定义样式。