ListViewの使い方を詳しく解説

この記事はReactNative ListViewの使い方を中心に紹介していますが、編集者がとても良いと思ったので、参考としてシェアさせていただきます。エディターをフォローして見てみましょう

最近ReactNativeを勉強しています

ListView

Androidでは、ReactNative ListViewの使い方を紹介します。 ListView には 2 つの項目が不可欠です。1 つ目は ListView のデータ ソースで、2 つ目は ListView 内の各項目のスタイルです。 ReactNative と同じです。まず簡単な例を見てみましょう: render() では、ListView のプロパティで、dataSource と renderRow をそれぞれ指定します。行がレンダリングされます。

dataSource

データ ソースを作成する場合、最も基本的な方法は ListView.DataSource データ ソースを作成し、 cloneWithRows メソッドを通じてそれに配列を渡すことです。

データ ソースに提供される rowHasChanged 関数は、データの行を再描画する必要があるかどうか、つまり、データが変更されたかどうかを ListView に伝えることができます。前のページの行データが変更されていない場合は再描画は実行されません。それ以外の場合は再描画が実行されます。 上記のコードに示すように、データをデータ ソースに設定するときは、もちろん、メソッドを使用してデータを取得し、データを設定するときにそのメソッドを呼び出すこともできます。

  constructor(props) {
   super(props);
   var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
   this.state = {
    dataSource: ds.cloneWithRows(['row 1', 'row 2']),
   };
  },

  render() {
   return (
    <ListView
     dataSource={this.state.dataSource}
     renderRow={(rowData) => <Text>{rowData}</Text>}
    />
   );
  },

このようにして、データを使用して論理処理を実行することを容易にするメソッドを通じてそれを取得できます。

renderRow

  constructor(props){
    super(props);
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(this._genRows()),
    };
  }

  _genRows(){
    const dataBlob = [];
    for(let i = 0 ; i< 200 ; i ++ ){
      dataBlob.push("aa"+i);
    }
    return dataBlob;
  }

この属性は、上に示したように、データ ソースからのデータの一部、その ID およびセクションを受け入れるメソッドで渡す必要があります。が含まれており、このデータ行をレンダリングするためのレンダリング可能なコンポーネントを返します。デフォルトでは、パラメーター内のデータはデータ ソースに入力されたデータそのものですが、いくつかのコンバーターを提供することもできます。

(highlightRow 関数を呼び出して) 行が強調表示されている場合、それに応じて ListView に通知されます。行が強調表示されると、その両側の分割線が非表示になります。行の強調表示された状態は、highlightRow(null) を呼び出すことでリセットできます。

(rowData, sectionID, rowID, highlightRow) => renderable

renderRow のメソッドはデータ ソースからデータの一部を自動的に受け入れるため、外部メソッドを呼び出すことで実装でき、外部メソッドのパラメーターから必要なデータを渡すだけで済みます。上記のコードに示すように、ソースから取得されたデータで十分です。

より複雑なレイアウトを実装する必要がある場合は、ListView の各行のスタイルとして外部コンポーネントをインポートすることもできます。

たとえば、コンポーネント Item_MyListView をカスタマイズした場合、ファイルの先頭で import を通じてそれを現在のコンポーネントにインポートする必要があります:

  _renderRow(rowData, sectionID, rowID){
    return (
        <View>
          <Text>{"rowData:"+rowData+"  rowId:"+rowID}</Text>
        </View>
      );
  }

  render() {
   return (
    <ListView
     dataSource={this.state.dataSource}
     renderRow={this._renderRow}
    />
   );
  },

そうすれば、インポートされた名前を使用して、インポートされたコンポーネントを直接使用できます。 :

 import Item_MyListView from './Item_MyListView';

ListView の Click

ListView の各行にクリック イベントを追加する必要がある場合、それを TouchableOpacity または TouchableHighlight のレイヤーでラップし、onPress メソッドを定義するだけです。

次のコードが表示されます:

  _renderRow(rowData, sectionID, rowID){
    return (
      <TouchableOpacity onPress={this._pressRow}>
        <View>
          <Text>{"rowData:"+rowData+"  rowId:"+rowID}</Text>
          <Item_MyListView></Item_MyListView>
        </View>
      </TouchableOpacity>
      );
  }

ListView の renderRow プロパティで _renderRow を呼び出すときは、これをバインドする必要があることに注意してください。そうしないと、以下に示すように、onPress の this がエラーを指すことになります。

コードをコピーします

コードは次のとおりです:

完全なコードは次のとおりです。

  _pressRow(rowID){
    alert("hellow"+rowID);
  }

  _renderRow(rowData, sectionID, rowID){
    return (
      <TouchableOpacity onPress={()=>this._pressRow(rowID)}>
        <View>
          <Text>{"rowData:"+rowData+"  rowId:"+rowID}</Text>
          <Item_MyListView info={rowData}></Item_MyListView>
        </View>
      </TouchableOpacity>
      );
  }

このうち、Item_MyListView はコンポーネントを任意に定義するだけで、実質的な意味はなく、再度表示されることはありません。

最終的な効果は以下のようになります:

以上がListViewの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。