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

上一章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页面。