React-Native 中 StackNavigator的跳轉界面的使用

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

一，建立一個項目：（名稱随意）Smlz

1，可以選擇在任意一個盤符下，建立一個空的檔案夾，用指令行的形式把項目建立在這個檔案夾下，比如我建立項目在rnProjects目錄下：

使用指令：

react-native init Smlz
           

其中指令行一定要切換到你想要把項目放入的目錄下；

建立成功後：

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

運作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: ,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: ,
        textAlign: 'center',
        margin: ,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: ,
    },
    text: {
        fontSize: ,
        backgroundColor: 'red',
        margin: ,
    }
});

 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！

StackNavigator官方連結位址

DEMO位址在評論第一條