react native 导航器 Navigator 简单的例子
阅读原文时间:2023年07月09日阅读:1

最近学习react native 是在为全栈工程师而努力,看网上把react native说的各种好,忍不住学习了一把。总体感觉还可以,特别是可以开发android和ios这点非常厉害,刚开始入门需要学习的还有很多。

react native的导航器 Navigator 就像是网页的路由,官方给的有点看不明白,试了好几次才成功,在这里整理一下。

首先在生成的项目里建一个文件MyScene.js,这个也可以不用建,这个只是把跳转后的内容包含进来用而已,如果建了文件,则文件里的内容是:

import React, { Component, PropTypes } from 'react';
import { Navigator, Text, TouchableHighlight,
AppRegistry, View } from 'react-native';

//class MyScene extends Component {这种定义的类是在不包含的时候用
//export default class MyScene extends Component {这种定义的方法是在包含此文件的时候用
export default class MyScene extends Component {
static propTypes = {
title: PropTypes.string.isRequired,
onForward: PropTypes.func.isRequired,
onBack: PropTypes.func.isRequired,
}
render() {
return (
Current Scene: { this.props.title } //单击事件回调 Tap me to load the next scene Tap me to go back
)
}
}

然后在index.android.js的文件里写:

import React, { Component, PropTypes } from 'react';
import { Navigator, Text, TouchableHighlight,
AppRegistry, View } from 'react-native';

import MyScene from './MyScene';//引入刚刚建好的文件。

export default class MyProject extends Component {

render() {
return (

<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('MyProject', () => MyProject);//这句话一定要加上

最后的效果: