React Native路由和导航 – React Native实战教程

上一章React Native实战教程请查看：React Native调试debug

在本章中，我们将学习并理解React Native中的路由和导航。

步骤1：安装路由器router

首先，我们需要安装路由器，我们将在本章使用React Native Router Flux，你可在terminal中在项目文件夹下运行以下命令进行安装。

npm i react-native-router-flux --save

步骤2：完整应用程序

因为我们想让路由器处理整个应用程序，所以我们将它添加到index.ios.js中，对于Android，你可以在index.android.js中执行相同的操作。

App.js

import React, {Component} from 'react';
import {AppRegistry, View} from 'react-native';
import Routes from './Routes.js';

class reactTutorialApp extends Component {
  render() {
    return <Routes />;
  }
}
export default reactTutorialApp;
AppRegistry.registerComponent('reactTutorialApp', () => reactTutorialApp);

步骤3：添加路由器

现在我们将在components文件夹中创建Routes组件，它将返回路由器与几个场景，每个场景都需要关键字、组件和标题。Router路由器使用key属性在场景之间进行切换，组件将渲染在屏幕上，标题将显示在导航栏中，我们还可以将初始属性设置为最初要渲染的场景。

Routes.js

import React from 'react';
import {Router, Scene} from 'react-native-router-flux';
import Home from './Home.js';
import About from './About.js';

const Routes = () => (
  <Router>
    <Scene key="root">
      <Scene key="home" component={Home} title="Home" initial={true} />
      <Scene key="about" component={About} title="About" />
    </Scene>
  </Router>
);
export default Routes;

步骤4：创建组件

我们已经有了前几章中的Home组件，现在，我们需要添加About组件，我们将添加goToAbout和goToHome功能来切换场景。

Home.js

import React from 'react';
import {TouchableOpacity, Text} from 'react-native';
import {Actions} from 'react-native-router-flux';

const Home = () => {
  const goToAbout = () => {
    Actions.about();
  };
  return (
    <TouchableOpacity style={{margin: 128}} onPress={goToAbout}>
      <Text>HOME页面</Text>
    </TouchableOpacity>
  );
};
export default Home;

About.js

import React from 'react';
import {TouchableOpacity, Text} from 'react-native';
import {Actions} from 'react-native-router-flux';

const About = () => {
  const goToHome = () => {
    Actions.home();
  };
  return (
    <TouchableOpacity style={{margin: 128}} onPress={goToHome}>
      <Text>ABOUT页面</Text>
    </TouchableOpacity>
  );
};
export default About;

该应用程序将初始渲染Home页面。