【React Native入門系列文章 七】頁面跳轉
本文學習React Native如何進行頁面跳轉,以及頁面跳轉間引數傳遞。
目前React Native中文網主推的頁面跳轉方式為React Navigation。它的使用非常簡單:
1、安裝導航庫:npm install --save react-navigation
2、引入 import {StackNavigator} from 'react-navigation';
3、StackNavigator的宣告:
const App = StackNavigator({ List: {screen: List}, Detail: {screen: Detail}, });
以上程式碼就可完成路由的配置,可以看到我一共配置了兩個頁面。一個是產品列表頁List.js,另一個是產品詳情頁Detail.js。
假設頁面A要調到頁面B,B再回退到A。
一、如何頁面跳轉?
1、從props中取出navigation的navigate方法(只要把元件加入到StackNavigator中,就會自動傳入props);
const {navigate} = this.props.navigation;
2、通過navigate方法跳轉
<View> <FlatList style={styles.row} numColumns={3} keyExtractor={item => item.id} onRefresh={this.fetchdata} refreshing={refreshing} data={movies} renderItem={ ({item}) => <Item title={item.title} image={item.images.medium} stars={item.rating.stars} onPress={() => navigate('Detail',{ id: item.id, })}/> } /> </View>
<View> <FlatList style={styles.row} numColumns={3} keyExtractor={item => item.id} onRefresh={this.fetchdata} refreshing={refreshing} data={movies} renderItem={ ({item}) => <Item title={item.title} image={item.images.medium} stars={item.rating.stars} onPress={() => navigate('Detail',{ id: item.id, })}/> } /> </View>
3、通過navigate回退
(1)取出navigation的goBack方法
const {goBack} = this.props.navigation;
(2)呼叫goBack方法
<View>
<Text>電影詳情頁</Text>
<Text>電影id:{state.params.id}</Text>
<Text onPress={() => goBack()}>返回</Text>
</View>
<View>
<Text>電影詳情頁</Text>
<Text>電影id:{state.params.id}</Text>
<Text onPress={() => goBack()}>返回</Text>
</View>
二、頁面跳轉如何傳參?
1、B如何接收值?
const {state} = this.props.navigation;
從navigation中取出state值,這個值就是頁面跳轉傳過來的值
2、A如何收到B回退傳過來的值?
(1)在A中定義一個callback方法,並且把callback方法傳給B
a)在state中加一個childState
state = {
movies: movies.subjects,
refreshing: false,
childState: '',
};
b)在render中取出childState
const {movies, refreshing, childState} = this.state;
c)定義一個callback方法,在callback中setState
<View>
<Text>子元件返回的資料:{childState}</Text>
<FlatList
style={styles.row}
numColumns={3}
keyExtractor={item => item.id}
onRefresh={this.fetchdata}
refreshing={refreshing}
data={movies}
renderItem={
({item}) =>
<Item
title={item.title}
image={item.images.medium}
stars={item.rating.stars}
onPress={() => navigate('Detail',{
id: item.id,
callback: (data) => {
this.setState({
childState: data
})
}
})}/>
}
/>
</View>
callback: (data) => {
this.setState({
childState: data
})
}
})}/>
}
/>
</View>
(2)在B中傳值
a)從navigation中取出state值
const {state, goBack} = this.props.navigation;
b)通過state的callback方法回撥
return (
<View>
<Text>電影詳情頁</Text>
<Text>電影id:{state.params.id}</Text>
<Text onPress={() => {
state.params.callback("test");
goBack();
}}>返回</Text>
</View>
);
return (
<View>
<Text>電影詳情頁</Text>
<Text>電影id:{state.params.id}</Text>
<Text onPress={() => {
state.params.callback("test");
goBack();
}}>返回</Text>
</View>
);
相關推薦
【React Native入門系列文章 七】頁面跳轉
本文學習React Native如何進行頁面跳轉,以及頁面跳轉間引數傳遞。 目前React Native中文網主推的頁面跳轉方式為React Navigation。它的使用非常簡單: 1、安裝導航庫:npm install --save react-navigat
【 D3.js 入門系列 --- 9.4 】 集群圖的制作
all users bject nodes -- 部分 函數 選擇 water 本人的個人博客為: www.ourd3js.com csdn博客為: blog.csdn.net/lzhlzz 轉載請註明出處,謝謝。
React Native 入門系列(瘸腿走路狀態)
React Native 也太容易跳錯了吧哭死 現在看見紅屏就想一頭撞死在手機上 react-navigation碰到的跳錯 死活找不到StackNavigation 看react-navigation的狀態應該是改成createStackNavigator了,但是props
【 D3.js 入門系列 --- 9.6 】 打包圖的製作
轉載請註明出處,謝謝。 打包圖( Pack ),用於包含與被包含的關係,也表示各個物件的權重,通常用一圓套一圓來表示前者,用圓的大小來表示後者。 這是各城市所屬關係的資料。我們現在要用 D3 的 layout 來轉換資料,使其容易進行視覺化處理
【 D3.js 入門系列 --- 10.2 】 可拖動的地圖
轉載請註明出處,謝謝。 本節是結合9.2節 和10節 的內容製作的一個可力學導向的中國地圖,使用者可以拖動中國的各個省份。 1. 定義各函式 var projection = d3.geo.mercator() .center(
【python3.5 tkinter】頁面跳轉
主函式main.py from tkinter import * from LoginPage import * root = Tk() root.title('小程式') LoginPage(root) root.mainloop() 登陸介面函式LoginPage.py
【Android基礎】頁面跳轉與傳值(Activity跳轉與傳值)
一個Android應用程式很少會只有一個Activity物件,如何在多個Activity之間進行跳轉,而且能夠互相傳值是一個很基本的要求。 本次我們就講一下,Android中頁面跳轉以及傳值的幾種方式! Activity跳轉與傳值,主要是通過Intent類來連線多個A
react +webpack+express router實現登入與頁面跳轉
5、express app 利用passport實現登入驗證與跳轉 var express = require('express'); var app= express(); var passport = require('passport'); var Strategy = require('passp
【React Native系列教程】構建React Native官方Examples
尊重版權,未經授權不得轉載 本文出自:賈鵬輝的技術部落格(http://blog.csdn.net/fengyuzhengfan/article/details/72835364) 告訴大家一個好訊息,為大家精心準備的React Native視訊教程釋出了,大家
【React Native系列教程】Mac(OSX)平臺搭建React Native開發環境
尊重版權,未經授權不得轉載 本文出自:賈鵬輝的技術部落格(http://blog.csdn.net/fengyuzhengfan/article/details/72575799) 告訴大家一個好訊息,為大家精心準備的React Native視訊教程釋出了,大家
【React Native系列教程】Windows平臺搭建React Native開發環境
尊重版權,未經授權不得轉載 本文出自:賈鵬輝的技術部落格(http://blog.csdn.net/fengyuzhengfan/article/details/72454037) 告訴大家一個好訊息,為大家精心準備的React Native視訊教程釋出了,大家
Web 前端開發精華文章集錦(jQuery、HTML5、CSS3)【系列十七】
《Web 前端開發精華文章推薦》2013年第五期(總第十七期)和大家見面了。夢想天空部落格關注 前端開發 技術,分享各種增強網站使用者體驗的 外掛,展示前沿的 HTML5 和 CSS3 技術應用,推薦優秀的 網頁設計 案例,共享精美的設計素材和優秀的 Web 開發工具,希望這些精心整理的前端技術文章能夠幫
【REACT NATIVE 系列教程之十】真機執行報錯COMMAND /BIN/SH FAILED WITH EXIT CODE 1 的解決方法
Himi最近在真機執行遇到 Command /bin/sh failed with exit code 1 的錯誤, 模擬器執行沒有任何問題。此問題已解決,這裡分享下解決方案。先來看下錯誤日誌,如下圖:主要是劃線的部分:1.PhaseScriptExecution Bundle\ React\ Nativ
【REACT NATIVE 系列教程之四】重新整理元件RENDER(重新渲染)的三種方式詳解
開發過遊戲的都應該很清楚,“刷屏”是多麼的重要。其實開發應用也如此,當元件的資料被修改後,如何及時更新元件呈現出最新的資料與效果一樣至關重要。那麼這裡Himi大概講三種常用的方式:this.setState() 【最為常用】這是在事件處理函式中和請求回撥函式中觸發 UI 更新的主要方法。一般情況下setSt
【稀飯】react native 實戰系列教程之自定義原生UI元件
上一節,講了關於RN的自定義原生模組,本節是關於自定義原生UI元件,學習完本節,你將瞭解到原生UI元件的開發流程,以及js如何向native傳送命令和native如何向js傳送事件。 原生UI元件之VideoView視訊播放器開發 React Nativ
【REACT NATIVE 系列教程之九】REACT NATIVE版本升級步驟與注意事項!
由於React Native處於快速迭代發展中,因此元件功能的擴充套件、語法的變更也將會有較大的區別,因此升級版本則屬於務必掌握的了。昨天Himi剛從0.23版本升級到0.26,升級的主要原因有兩點:1. 一些元件在最新版本中加入了很多新的屬性,例如0.23版本中Modal動畫沒有最新的屬性:a
【REACT NATIVE 系列教程之一】觸控事件的兩種形式與四種TOUCHABLE元件詳解
本文是RN(React Native)系列教程第一篇,當然也要給自己的群做個廣告: React Native @Himi :126100395 剛建立的群,歡迎一起學習、討論、進步。本文主要講解兩點:1. PanResponder:觸控事件,用以獲取使用者手指所在螢幕的座標(x,y)或觸發、或滑動、或
【REACT NATIVE 系列教程之十一】外掛的安裝、使用與更新(示例:REACT-NATIVE-TAB-NAVIGATOR)
本篇主要來詳細介紹如何安裝、升級外掛及講解一個react-native-tab-navigator的示例。本文舉例使用的外掛:react-native-tab-navigator ,選項卡形式的導航1. 通過 https://www.npmjs.com 找到我們想使用的外掛, 搜尋:react-native
【REACT NATIVE 系列教程之五】NAVIGATOR(頁面導航)的基本使用與傳參
今天介紹一種應用開發中常用的負責頁面切換及導航功能的元件:Navigator一:Navigator對於頁面導航其實主要功能就是:每個頁面都知道本身應該切換到哪個頁面,並且切到的頁面會記錄從哪裡來,如果要返回的話,知道返回到哪個頁面。這一切都不需要再用邏輯管理!而且每個頁面之間也可以進行引數傳遞,很方便的元件。
【REACT NATIVE 系列教程之十三】利用LISTVIEW與TEXTINPUT製作聊天/對話方塊&&獲取元件例項常用的兩種方式
補充說明:一:很多童鞋問,鍵盤調出來被擋住了,那麼下面給出三個解決方案:1. 在render最外層包一個ScrollView,然後當鍵盤調出時,scrollTo即可實現。2. 在底部新增一個可變化高度的view,根據鍵盤獲取、失去焦點時,進行處理實現二:有的童鞋說對話方塊的背景沒有根據內容長短自適應,OK ,