特別申明：本人代碼不作為任何商業的用途，只是個人學習的一些心得，為了使得後來的更多的程序員少走一些彎路。*（如若侵犯你的版權還望見諒）*。

開發工具：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實現的方法。

react native進一步學習（NavigatorIOS 學習）