剛接觸React-Native,其中對React，javascript, 也僅僅是知道的水平，但是並不影響對這邊文章的閱讀，首先你需要確認，開發react-native的環境配置，和工具安裝你已經全部安裝並測試可以使用！

一，新建一個專案：（名稱隨意）Smlz

1，可以選擇在任意一個碟符下，新建一個空的資料夾，用命令列的形式把專案新建在這個資料夾下，比如我新建專案在rnProjects目錄下：

使用命令：

react-native init Smlz

其中命令列一定要切換到你想要把專案放入的目錄下；

建立成功後：

你可以連線上你的手機，然後輸入：

react-native
 
 run-android

執行android專案，提示如下資訊

所以：如下圖所示；先切換到專案的內，在執行命令

手機執行成功圖如下：

如果你在這一步提示錯誤：
比如：提示沒有註冊，或者連線不上埠8081，請確保你已經開啟react-native 服務，（本人裝的node.js,在執行命令時，會自動開啟一個執行服務視窗，）然後關閉佔用該埠的其他服務，再次嘗試執行命令 react-native run-android！
如果還是不行，請貼出錯誤留言，或者百度！

二，下載 安裝 StackNavigator：

繼續回到命令列介面：然後執行

yarn add react-navigation
 

如下圖所示：

下載完畢後，我們需要修改

中程式碼，並且新建一個資料夾；

三，程式碼的修改與新增
新建一個test的資料夾，並新建一個App.js的檔案，然後用 Notepad++開啟；
並把如下程式碼複製貼上進去：

import React from 'react';
import {
    AppRegistry,
    View,
    StyleSheet,
    Button,
    Text,
} from 'react-native';
//匯入StackNavigator這個元件
import { StackNavigator } from 'react-navigation'
 
;

class HomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Welcome',
    };
    render() {
        const { navigate } = this.props.navigation;
        return (
            <View>
                <Text style={styles.text}>我靠，這React-native的坑，真的是太深了，掉進去，爬不出來</Text>
                <Button
                    onPress={() => navigate('Chat', {user:'React-Native'})}
                    title="Chat with Lucy"
                />
            </View>
        );
    }
}

//add a ChatScreen
class ChatScreen extends React.Component {
    static navigationOptions = ({ navigation }) => ({
        title: `Chat with ${navigation.state.params.user}`,
    });
    render() {
        const { params } = this.props.navigation.state;
        return (
            <View>
                <Text style={styles.welcome}>Chat with {params.user}</Text>
            </View>
        );
    }
}

//定義text的風格
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
    text: {
        fontSize: 30,
        backgroundColor: 'red',
        margin: 10,
    }
});

 const Simple = StackNavigator({

     Home: { screen: HomeScreen },
     Chat: { screen: ChatScreen },
});


 //表示輸出的意思
export default Simple; 

然後開啟 index.android.js檔案修改程式碼如下：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

import Simple from './Test/App.js'

export default class Smlz extends Component {
  render() {
    return (
       <Simple/>
    );
  }
}

AppRegistry.registerComponent('Smlz', () => Smlz);

儲存後重新執行專案

效果圖如下：

實現這個效果整整花了我三天的時間，期間的坑真的太多，太多，如果你有幸一次成功，恭喜你太幸運了，如果有問題，請留言，或者自行google！

DEMO地址在評論第一條