特别申明：本人代码不作为任何商业的用途，只是个人学习的一些心得，为了使得后来的更多的程序员少走一些弯路。*（如若侵犯你的版权还望见谅）*。
开发工具：WebStorm，xcode
1. rn的创建的时候一般用这个创建，因为最新的被墙了：
react-native init MyApp --version 0.44.3
2. 引入库的类的代码实例：
import { Navigation } from ‘react-native‘;
3. 引入自己新建的类
var List = require(‘./list‘);
4. NavigatorIOS使用的时候必须指定路径不然会报错。
5. 如果不是默认的加载的第一个启动页面，一般创建一个类的话用如下方法：
var List = React.createClass({
render(){
return(
<View style={styles.container}>
</View>
);
},
});
下面是就前面几个知识点我写得code：
import React, { Component } from ‘react‘;
import {
AppRegistry,
StyleSheet,
Text,
View
} from ‘react-native‘;
import { NavigatorIOS } from ‘react-native‘;
var List = require(‘./list‘);
export default class navBarTest extends Component {
render() {
return (
<NavigatorIOS
style={styles.container}
initialRoute={{
component:List,
title:‘游轮‘,
passProps:{},
}}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
AppRegistry.registerComponent(‘navBarTest‘, () => navBarTest);
以上是创建一个 NavigatorIOS ，然后默认list是主页面。跳转到另外一个详情界面的时候只需要定义一个动作，然后加实现这个函数就可以了。下面是实例代码：
import React, { Component } from ‘react‘;import { AppRegistry, StyleSheet, Text, View, ScrollView,} from ‘react-native‘;
var Detail = require(‘./detail‘);var List = React.createClass({ render(){ return( <ScrollView style={styles.container}> <Text style={styles.list_item} onPress={this.goTo}> * 豪华游龙周家嗖嗖嗖嗖嗖嗖嗖嗖嗖 </Text> <Text style={styles.list_item} onPress={this.goTo}> * 豪华游龙周家嗖嗖嗖嗖嗖嗖嗖嗖嗖 </Text> <Text style={styles.list_item} onPress={this.goTo}> * 豪华游龙周家嗖嗖嗖嗖嗖嗖嗖嗖嗖 </Text> </ScrollView> ); },
goTo:function () { this.props.navigator.push({ component:Detail, title:‘游轮详情‘, rightButtonTitle:‘购物车‘, onRightButtonPress:function () { alert(‘进入购物车‘); } }); }});
const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: ‘#F5FCFF‘, }, list_item: { height:30, color:‘#FF0067‘, fontSize:16, fontWeight:‘bold‘, }});
module.exports = List;
特别的说明下，当新建一个类，想输出这个类的时候的方法就是上面的最后一句代码。及（module.exports = List;）
上面是一个简单的跳转，利用空间 NavigatorIOS 实现的，当我在使用这个东西的时候的疑惑就总结为下面几个点：1.该怎么引入 NavigatorIOS 这个空间，上面有代码，及（import { NavigatorIOS } from ‘react-native‘;）2.跳转的时候我怎么给它设置根控制器。上面的List。3.跳转方法怎么实现，onPress实现的方法。