快捷導(dǎo)航

react-native中ListView組件點(diǎn)擊跳轉(zhuǎn)的方法示例

更新時間：2017年09月30日 09:57:35 作者：Tomoya

ListView作為React Native的核心組件,用于高效地顯示一個可以垂直滾動的變化的數(shù)據(jù)列表。下面這篇文章主要給大家介紹了關(guān)于react-native中ListView組件點(diǎn)擊跳轉(zhuǎn)的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。

前言

在上一篇我們實(shí)現(xiàn)了NavigatorIOS與ListView結(jié)合使用的方法，那么這篇文章介紹一下ListView里點(diǎn)擊跳轉(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í)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

參考

ListView列表點(diǎn)擊跳轉(zhuǎn)

源碼：https://github.com/tomoya92/ITNews-React-Native

您可能感興趣的文章:

相關(guān)文章

React找不到模塊“./index.module.scss”或其相應(yīng)的類型聲明及解決方法
這篇文章主要介紹了React找不到模塊“./index.module.scss”或其相應(yīng)的類型聲明及解決方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-09-09
React中組件復(fù)用的方式總結(jié)
這篇文章主要為大家詳細(xì)介紹了Mixin、HOC、Render?Props、Hooks這四種組件間復(fù)用的方式，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下
2023-06-06
React中的useState和useEffect詳細(xì)解析
useState和useEffect是React的兩個重要Hook,用于組件狀態(tài)管理和處理副作用,useState允許添加狀態(tài)變量,控制組件渲染,而useEffect用于執(zhí)行渲染后的副作用操作,本文給大家介紹React中的useState和useEffect詳細(xì)解析,感興趣的朋友跟隨小編一起看看吧
2024-10-10
React forwardRef的使用方法及注意點(diǎn)
React.forwardRef的API中ref必須指向dom元素而不是React組件，通過一段示例代碼給大家介紹了React forwardRef使用方法及注意點(diǎn)還有一些特殊情況分析，感興趣的朋友跟隨小編一起看看吧
2021-06-06
React18?中的?Suspense?API使用實(shí)例詳解
這篇文章主要為大家介紹了React18?中的?Suspense?API使用實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
React-hooks中的useEffect使用步驟
這篇文章主要介紹了React-hooks中的useEffect,對于React組件來說，主作用是根據(jù)數(shù)據(jù)(state/props)渲染UI，除此之外都是副作用（比如手動修改DOM、發(fā)送ajax請求），本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧
2022-05-05
React動態(tài)更改html標(biāo)簽的實(shí)現(xiàn)方式
這篇文章主要介紹了React動態(tài)更改html標(biāo)簽的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
淺談React useDebounce 防抖原理
本文主要介紹了淺談React useDebounce 防抖原理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
詳解在React項(xiàng)目中安裝并使用Less（用法總結(jié)）
這篇文章主要介紹了詳解在React項(xiàng)目中安裝并使用Less（用法總結(jié)），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
React中的權(quán)限組件設(shè)計(jì)問題小結(jié)
這篇文章主要介紹了React中的權(quán)限組件設(shè)計(jì),整個過程也是遇到了很多問題，本文主要來做一下此次改造工作的總結(jié)，對React權(quán)限組件相關(guān)知識感興趣的朋友一起看看吧
2022-07-07