react native 页面跳转

React Native目前有几个内置的导航器组件，一般来说我们首推Navigator。它使用纯JavaScript实现了一个导航栈，因此可以跨平台工作

场景简单来说其实就是一个全屏的React组件。与之相对的是单个的Text、Image又或者是你自定义的什么组件，仅仅占据页面中的一部分。

下面我们来定义一个仅显示一些文本的简单场景。创建一个名为“MyScene.js”的文件，然后粘贴如下代码：

import React, { Component } from 'react'; import { View, Text } from 'react-native'; export default class MyScene extends Component { static defaultProps = { title: 'MyScene' }; render() { return ( <View> <Text>Hi! My name is {this.props.title}.</Text> </View> ) } }

注意组件声明前面的export default关键字。它的意思是导出(export)当前组件，以允许其他组件引入(import)和使用当前组件

// ./MyScene表示的是当前目录下的MyScene.js文件，也就是我们刚刚创建的文件 // 注意即便当前文件和MyScene.js在同一个目录中，"./"两个符号也是不能省略的！ // 但是.js后缀是可以省略的 import MyScene from './MyScene'; class YoDawgApp extends Component { render() { return ( <MyScene /> ) } } AppRegistry.registerComponent('YoDawgApp', () => YoDawgApp);

场景已经说的够多了，下面我们开始尝试导航跳转。首先要做的是渲染一个Navigator组件，然后通过此组件的renderScene属性方法来渲染其他场景。

render() {
  return ( <Navigator initialRoute={{ title: 'My Initial Scene', index: 0 }} renderScene={(route, navigator) => { return <MyScene title={route.title} /> }} /> ); } 

使用导航器经常会碰到“路由(route)”的概念。“路由”抽象自现实生活中的路牌，在RN中专指包含了场景信息的对象。renderScene方法是完全根据路由提供的信息来渲染场景的。你可以在路由中任意自定义参数以区分标记不同的场景，我们在这里仅仅使用title作为演示。

要过渡到新的场景，你需要了解push和pop方法。这两个方法由navigator对象提供，而这个对象就是上面的renderScene方法中传递的第二个参数。 我们使用这两个方法来把路由对象推入或弹出导航栈

import React, { Component } from 'react'; import { AppRegistry, Navigator, Text, View } from 'react-native'; import MyScene from './MyScene'; class SimpleNavigationApp extends Component { render() { return ( <Navigator initialRoute={{ title: 'My Initial Scene', index: 0 }} renderScene={(route, navigator) => <MyScene title={route.title} // Function to call when a new scene should be displayed onForward={ () => { const nextIndex = route.index + 1; navigator.push({ title: 'Scene ' + nextIndex, index: nextIndex, }); }} // Function to call to go back to the previous scene onBack={() => { if (route.index > 0) { navigator.pop(); } }} /> } /> ) } } AppRegistry.registerComponent('SimpleNavigationApp', () => SimpleNavigationApp);

对应的MyScene.js代码如下：

import React, { Component, PropTypes } from 'react'; import { View, Text, TouchableHighlight } from 'react-native'; export default class MyScene extends Component { static propTypes = { title: PropTypes.string.isRequired, onForward: PropTypes.func.isRequired, onBack: PropTypes.func.isRequired, } render() { return ( <View> <Text>Current Scene: { this.props.title }</Text> <TouchableHighlight onPress={this.props.onForward}> <Text>点我进入下一场景</Text> </TouchableHighlight> <TouchableHighlight onPress={this.props.onBack}> <Text>点我返回上一场景</Text> </TouchableHighlight> </View> ) } }