ホームページ  >  記事  >  ウェブフロントエンド  >  React-NativeにおけるListViewコンポーネントのクリックジャンプの実装方法

React-NativeにおけるListViewコンポーネントのクリックジャンプの実装方法

小云云
小云云オリジナル
2018-01-30 17:43:251898ブラウズ

この記事では、React Native の ListView コンポーネントのクリック ジャンプに関する関連情報を主に紹介します。困っている友達は参考にしてください。以下を見てみましょう。

最初に効果を見てみましょう

使用方法

NewsList.js

_onPress(rowData) {
 this.props.navigator.push({
 title: rowData,
 component: CNodeJSList,
 passProps: {
 name: rowData,
 }
 })
}

手順

  • this.props.navigator.push() を使用して、次のビューにジャンプするコンポーネントを指定します。値を渡したい場合は、 passProps 属性を使用し、次のビューで this.props.name を使用して値を受け取ることができます

  • onPress でのメソッドの呼び出しについては、_onPress メソッドが onPress= で呼び出された場合{this._onPress}、ページ ジャンプしないので、これにバインドする必要があります。 書き込みメソッドは、 onPress={this._onPress.bind(this)} ですが、この方法では値を渡すことはできないようです。したがって、値を渡すには、次のように記述する必要があります: onPress={()=> {this._onPress(rowData)}} そうすれば問題なく、ページは正常にジャンプできます。

関連する推奨事項:

div クリックによる別のページへのジャンプの JS 実装 コード例

WeChat アプレット関数の調整方法 複数のクリック ジャンプを防ぐ方法

サンプルの詳細な説明 クリック ジャンプの JS 簡単な実装 方法ログインメール機能を移行するには

以上がReact-NativeにおけるListViewコンポーネントのクリックジャンプの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。