react-native中ListView組件點擊跳轉(zhuǎn)的方法示例
前言
在 上一篇 我們實現(xiàn)了NavigatorIOS與ListView結(jié)合使用的方法,那么這篇文章介紹一下ListView里點擊跳轉(zhuǎn)到新視圖的方法,話不多說了,來一起看看詳細(xì)的介紹吧。
先看效果
用法
NewsList.js
_onPress(rowData) { this.props.navigator.push({ title: rowData, component: CNodeJSList, passProps: { name: rowData, } }) }
說明
- 使用
this.props.navigator.push()
指定component 就可以跳轉(zhuǎn)到下一個視圖里了,如果想傳值,可以用 passProps 屬性,在下一個視圖里使用this.props.name
接收就可以了 - 對于onPress里方法的調(diào)用,如果是以
onPress={this._onPress}
調(diào)用 _onPress方法,頁面是不跳轉(zhuǎn)的,需要綁定this,寫法是:onPress={this._onPress.bind(this)}
但這樣好像沒法傳值,所以要傳值需要這樣寫:onPress={()=>{this._onPress(rowData)}}
,這樣就沒問題了,頁面也可以跳轉(zhuǎn)成功了
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
參考
ListView列表點擊跳轉(zhuǎn)
源碼:https://github.com/tomoya92/ITNews-React-Native
- react-native動態(tài)切換tab組件的方法
- React Native懸浮按鈕組件的示例代碼
- 詳解如何在項目中使用jest測試react native組件
- React Native 截屏組件的示例代碼
- React Native中導(dǎo)航組件react-navigation跨tab路由處理詳解
- React Native 通告消息豎向輪播組件的封裝
- 詳解React Native開源時間日期選擇器組件(react-native-datetime)
- react-native DatePicker日期選擇組件的實現(xiàn)代碼
- React-Native之截圖組件react-native-view-shot的介紹與使用小結(jié)
相關(guān)文章
React引入antd-mobile+postcss搭建移動端
本文給大家分享React引入antd-mobile+postcss搭建移動端的詳細(xì)流程,文末給大家分享我的一些經(jīng)驗記錄使用antd-mobile時發(fā)現(xiàn)我之前配置的postcss失效了,防止大家踩坑,特此把解決方案分享到腳本之家平臺,需要的朋友參考下吧2021-06-06React如何使用axios請求數(shù)據(jù)并把數(shù)據(jù)渲染到組件
這篇文章主要介紹了React如何使用axios請求數(shù)據(jù)并把數(shù)據(jù)渲染到組件,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08深入理解React調(diào)度(Scheduler)原理
本文主要介紹了深入理解React調(diào)度(Scheduler)原理,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07在react中對less實現(xiàn)scoped配置方式
這篇文章主要介紹了在react中對less實現(xiàn)scoped配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11react框架next.js學(xué)習(xí)之API?路由篇詳解
這篇文章主要為大家介紹了react框架next.js學(xué)習(xí)之API?路由篇詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09