ReactNative——頁面跳轉

来源:http://www.cnblogs.com/Harold-Hua/archive/2016/09/28/React-Native_Navigator.html
-Advertisement-
Play Games

效果圖： 進入工作目錄，運行 react-native init NavigatorProject 創建項目NavigatorProject 延伸：傳參。 以上面的代碼為基礎。 一： 效果圖： 二： 效果圖： ...


效果圖：

 

進入工作目錄，運行

react-native init NavigatorProject

創建項目NavigatorProject

 

 

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

 

class navigatorProject extends Component{
    render(){
        let defaultName = 'firstPageName';
        let defaultComponent = FirstPageComponent;

        return(
            <Navigator
                initialRoute = {{name: defaultName, component: defaultComponent}}　　//初始化導航器Navigator,指定預設的頁面
                configureScene = {
                    (route) => {
                        return Navigator.SceneConfigs.FloatFromRight;　　//配置場景動畫，頁面之間跳轉時候的動畫
                    }
                }
                renderScene = {
                    (route, navigator) =>{
                        let Component = route.component;
                        return <Component{...route.params} navigator = {navigator} />　　//渲染場景
                    }
                }
            />
        );
    }  
}

 

//第一個頁面

class FirstPageComponent extends Component{
    clickJump(){
        const{navigator} = this.props;
        if(navigator){
            navigator.push({　　//navigator.push 傳入name和你想要跳的組件頁面
                name: "SecondPageComponent",
                component: SecondPageComponent
            });
        }  
    }

    render(){
        return(
            <View style = {styles.container}>
                <Text>我是第一個頁面</Text>
                <TouchableHighlight
                    underlayColor = "rgb(180,135,250)"
                    activeOpacity = {0.5}
                    style = {{
                        borderRadius: 8,
                        padding: 8,
                        marginTop: 8,
                        backgroundColor: "#F30"
                    }}
                    onPress = {this.clickJump.bind(this)}>
                    <Text>點擊進入第二個頁面</Text>
                </TouchableHighlight>
            </View>
        );
    }
}

 

//第二個頁面

class SecondPageComponent extends Component{
    clickJump(){
        const{navigator} = this.props;
        if(navigator){
            navigator.pop();　　//navigator.pop 使用當前頁面出棧, 顯示上一個棧內頁面.
        }
    }

    render(){
        return(
            <View style = {styles.container}>
                <Text>我是第二個頁面</Text>
                <TouchableHighlight
                    underlayColor = "rgb(180, 135, 250)"
                    activeOpacity = {0.5}
                    style = {{
                        borderRadius: 8,
                        padding: 8,
                        marginTop: 5,
                        backgroundColor: "#F30"
                    }}
                    onPress = {this.clickJump.bind(this)}>
                    <Text>點擊返回第一個頁面</Text>
                </TouchableHighlight>
            </View>
        );
    }
}

 

const styles = StyleSheet.create({
　container: {
　　flex: 1,
　　justifyContent: 'center',
　　alignItems: 'center',
　　backgroundColor: '#FFFFFF',
　},
});

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

 

 

延伸：傳參。

以上面的代碼為基礎。

 

一：

效果圖：

 

//第一個界面
class FirstPageComponent extends Component{
    constructor(props){
        super(props);
        //參數來源
        this.state = {
            author: '華帥'
        };
    }

    clickJump(){
        const{navigator} = this.props;
        if(navigator){
            navigator.push({
                name: "SecondPageComponent",
                component: SecondPageComponent,
                //傳遞參數，入棧
                params: {
                    author: this.state.author,
                }
            });
        }
    }

    render(){
        return(
            <View style = {styles.container}>
                <Text>我是第一個頁面</Text>
                <TouchableHighlight
                    underlayColor = "rgb(180, 135, 250)"
                    activeOpacity = {0.5}
                    style = {{
                        borderRadius: 8,
                        padding: 8,
                        marginTop: 8,
                        backgroundColor: "#F30"
                    }}
                    onPress = {this.clickJump.bind(this)} >
                    <Text>點擊進入第二個頁面</Text>
                </TouchableHighlight>
            </View>
        );
    }
}

 

//第二個頁面
class SecondPageComponent extends Component{
    constructor(props) {
        super(props);
        this.state = {};
    }

    //接收傳遞過來的參數
    componentDidMount() {
        this.setState({
            author: this.props.author,
        });
    }

    clickJump(){
        const{navigator} = this.props;
        if(navigator){
            navigator.pop();
        }
    }

    render(){
        return(
            <View style = {styles.container}>
                <Text>我是第二個頁面</Text>
                <TouchableHighlight
                    underlayColor = "rgb(180, 135, 250)"
                    activeOpacity = {0.5}
                    style = {{
                        borderRadius: 8,
                        padding: 8,
                        marginTop: 5,
                        backgroundColor: "#F30"
                    }}
                    onPress = {this.clickJump.bind(this)}>
                    <Text>點擊返回第一個頁面</Text>
                </TouchableHighlight>
                <Text>作者是：{this.state.author}</Text>
            </View>
        );
    }
}

 

 

二：

效果圖：

 

//第一個頁面

class FirstPageComponent extends Component{

    constructor(props){
        super(props);
        //參數來源
        this.state = {
            author: "華帥",
            id: 1,
            user: null,
        };
    }

    clickJump(){
        const{navigator} = this.props;
        const self = this;
        if(navigator){
            navigator.push({
                name: "SecondPageComponent",
                component: SecondPageComponent,
                //傳遞參數，入棧
                params:{
                    author: this.state.author,
                    id: this.state.id,
                    //從第二頁獲取user
                    getUser: function(user){
                        self.setState({
                            user: user
                        });
                    }
                }
            });
        }
    }

    render(){
        if(this.state.user){
            return(
                <View>
                    <Text style = {styles.container}>用戶信息：{JSON.stringify(this.state.user)}</Text>
                </View>
            );
        }else{
            return(
                <View style = {styles.container}>
                    <Text>我是第一個頁面</Text>
                    <TouchableHighlight
                        underlayColor = "rgb(180, 135, 250)"
                        activeOpacity = {0.5}
                        style = {{
                            borderRadius: 8,
                            padding: 8,
                            marginTop: 8,
                            backgroundColor: "#F30"
                        }}
                        onPress = {this.clickJump.bind(this)}>
                        <Text>點擊進入第二個頁面</Text>
                    </TouchableHighlight>
                </View>
            );
        }
    }
}

 

 

const USER_MODELS = {
    1: {name: '華帥', age: 44},
    2: {name: '小明', age: 12}
};

 

//第二個頁面

class SecondPageComponent extends Component{
    constructor(props){
        super(props);
        this.state = {
            id:null
        };
    }

    //接收傳遞過來的參數
    componentDidMount(){
        this.setState({
            author: this.props.author,
            id: this.props.id,
        });
    }

    clickJump(){
        const{navigator} = this.props;
        if(this.props.getUser){
            let user = USER_MODELS[this.props.id];
            this.props.getUser(user);
        }

        if(navigator){
            navigator.pop();
        }
    }

    render(){
        return(
            <View style = {styles.container}>
                <Text>我是第二個頁面</Text>
                <Text>ID: {this.state.id}</Text>
                <TouchableHighlight
                    underlayColor = "rgb(180, 135, 250)"
                    activeOpacity = {0.5}
                    style = {{
                        borderRadius: 8,
                        padding: 8,
                        marginTop: 5,
                        backgroundColor: "#F30"
                    }}
                    onPress = {this.clickJump.bind(this)}>
                    <Text>點擊返回第一個頁面</Text>
                </TouchableHighlight>
                <Text>作者是：{this.state.author}</Text>
            </View>
        );
    }
}

  

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 關於docker
    摘要： 最近很多阿裡內部的同學和客戶私信來咨詢如何學習 Docker 技術。為此，我們列了一個路線圖供大家學習Docker和阿裡雲容器服務。這個列表包含了一些社區的優秀資料和我們的原創文章。我們會隨著Docker技術的發展持續更新本文，也會在雲棲社區繼續貢獻內容來幫助同學們快速入門或持續提高。 Do... ...
  • 哪種緩存效果高？開源一個簡單的緩存組件j2cache
    背景 現在的web系統已經越來越多的應用緩存技術，而且緩存技術確實是能實足的增強系統性能的。我在項目中也開始接觸一些緩存的需求。 開始簡單的就用jvm(java托管記憶體)來做緩存，這樣對於單個應用伺服器來說很好。 為了系統的可用性，需要做災備，那麼就要多準備一套系統環境，這時就會有一些共用資源的問題 ...
  • JavaScript之鏈式結構序列化
    在JavaScript代碼有很多單鏈表形式的代碼，如if_else，switch等，倘若我們想將其如同Promise一樣扁平化處理呢？下麵我們就一起來看看唄~ ...
  • JavaScript的個人學習隨手記（二）
    JS HTML DOM 改變 HTML 輸出流 JavaScript 能夠創建動態的 HTML 內容： 今天的日期是： Sat Sep 24 2016 15:06:50 GMT+0800 (中國標準時間) 在 JavaScript 中，document.write() 可用於直接向 HTML 輸出流 ...
  • 淺談CSS hack（瀏覽器相容）
    今天簡單寫一點關於瀏覽器相容的處理方法，雖然百度上已經有很多，但是我還是要寫！ 先看一個圖 這個圖描述了2016年1月至8月網民們所使用的瀏覽器市場份額（來源：http://tongji.baidu.com/data/browser）。令我感到欣慰的是chrome排第一，chrome一直以來對W3C ...
  • javascript canvas畫訂單
    前段時間看了某個平臺的後臺，發現訂單顯示使用的canvas進行繪畫，直觀，明瞭的表達出了訂單的走勢如下 所以自己心癢癢的，就自己模仿了一個-->貼上代碼 效果如下 參考教材：http://blog.csdn.net/clh604/article/details/8536059 http://www. ...
  • canvas濾鏡之簡單的取反
    自己學習了一下canvas濾鏡 編寫一個簡單的小界面，嘿嘿！ 註釋都在裡面啦啦啦，感興趣的來瞅瞅哦😯 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #wrap ...
  • 深入學習jQuery描述文本內容的3個方法
    [1]html() [2]text() [3]val() [4]總結 ...
一周排行
    -Advertisement-
    Play Games
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類