上一章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;
【React Native路由和导航 – React Native实战教程】该应用程序将初始渲染Home页面。
推荐阅读
- React Native在Android和IOS运行项目的命令 – React Native实战教程
- React Native调试debug – React Native实战教程
- React Native动画LayoutAnimation – React Native实战教程
- React Native Button元素 – React Native实战教程
- React Native HTTP网络请求 – React Native实战教程
- React Native图片Image元素 – React Native实战教程
- React Native ScrollView元素 – React Native实战教程
- React Native使用文本输入TextInput元素 – React Native实战教程
- React Native列表ListView – React Native实战教程