ListView は 9 正方形グリッド効果のケースを実装します。

この記事では、9 マスグリッド効果を実現するための React Native の ListView の例を主に紹介します。興味のある方は参考にしてください。

Android ネイティブ開発では、ListView が非常によく使われます。リスト コントロールでは、React Native (RN) はこの機能をどのように実装するのでしょうか? ListView のソース コードを見てみましょう
ListView は ScrollView に基づいて拡張されているため、ScrollView の関連プロパティがあります:

dataSource: データ ソース。Android の BaseAdapter に渡すデータ コレクションと同様です。 。

renderRow: BaseAdapter の getItem メソッドと同様に、特定の行をレンダリングします。

onEndReached: 簡単に言えば、Android のネイティブ開発では、対応するメソッドを自分で実装する必要があります。

onEndReachedThreshold: onEndReached を呼び出す前の重要な値。単位はピクセルです。

refreshControl: ScrollView のプルダウン更新機能を提供する RefreshControl コンポーネントを指定します。 (この属性は ScrollView から継承されます)

renderHeader: Android ListView の addHeader と同様に、ヘッド ビューをレンダリングします。

グリッドの効果を実現したい場合、上記の属性は基本的にいくつかの一般的なリスト要件を解決できます。このコンポーネントを使用して実現することもできます。このコンポーネントは、Android の RecyclerView コントロールに似ています。

pageSize: Android GridView の numColumns に似た、レンダリングされたグリッドの数。

contentContainerStyle: このプロパティは ScrollView から継承され、主にこのコンポーネントのコンテンツ コンテナーに作用します。

ListView を使用して 9 正方形グリッドの効果を実現するには:

1. pageSize を設定してグリッドの数を確認します

<ListView  
   automaticallyAdjustContentInsets={false}  
   contentContainerStyle={styles.grid}  
   dataSource={this.state.dataSource}  
   renderRow={this.renderRow.bind(this)}  
   pageSize={3}  
   refreshControl={  
     <RefreshControl  
      onRefresh={this.onRefresh.bind(this)}  
      refreshing={this.state.isLoading}  
      colors={[&#39;#ff0000&#39;, &#39;#00ff00&#39;, &#39;#0000ff&#39;]}  
      enabled={true}  
      />  
    }  
   />

2. 各グリッドの幅スタイルを設定します

itemLayout:{  
  flex:1,  
  width:Util.size.width/3,  
  height:Util.size.width/3,  
  alignItems:'center',  
  justifyContent:'center',  
  borderWidth: Util.pixel,  
  borderColor: '#eaeaea'  
 },

3. contentContainerStyle の対応する属性の設定

grid: {  
  justifyContent: 'space-around',  
  flexDirection: 'row',  
  flexWrap: 'wrap'  
 },

ListView のデフォルトの方向は垂直であるため、ListView の contentContainerStyle 属性を設定し、flexDirection:'row' を追加する必要があります。次に、ListView は同じ行に表示され、flexWrap:'wrap' 設定によって自動的に折り返されます。

注: flexWrap 属性:wrap、nowrap、wrap:スペースが不足している場合の自動行折り返し、nowrap:スペースが不足しており、コンテナを圧縮しますが、自動的に折り返しません。

以下は完全なコードです:

 import React, { Component } from 'react'; 
import { 
  AppRegistry, 
  StyleSheet, 
  Text, 
  View, 
  ListView, 
  Image, 
  TouchableOpacity, // 不透明触摸 
  AlertIOS 
} from 'react-native'; 
 
// 获取屏幕宽度 
var Dimensions = require('Dimensions'); 
const screenW = Dimensions.get('window').width; 
 
// 导入json数据 
var shareData = require('./shareData.json'); 
 
// 一些常亮设置 
const cols = 3; 
const cellWH = 100; 
const vMargin = (screenW - cellWH * cols) / (cols + 1); 
const hMargin = 25; 
 
// ES5 
var ListViewDemo = React.createClass({ 
  // 初始化状态值(可以变化) 
  getInitialState(){ 
    // 创建数据源 
    var ds = new ListView.DataSource({rowHasChanged:(r1,r2) => r1 !== r2}); 
    return{ 
      dataSource:ds.cloneWithRows(shareData.data) 
    } 
  }, 
 
  render(){ 
    return( 
      <ListView 
        dataSource={this.state.dataSource} 
        renderRow={this.renderRow} 
        contentContainerStyle={styles.listViewStyle} 
      /> 
    ); 
  }, 
 
  // 返回cell 
  renderRow(rowData){ 
    return( 
      <TouchableOpacity activeOpacity={0.8} onPress={()=>{AlertIOS.alert(&#39;点击了&#39;)}} > 
        <View style={styles.innerViewStyle}> 
          <Image source={{uri:rowData.icon}} style={styles.iconStyle} /> 
          <Text>{rowData.title}</Text> 
        </View> 
      </TouchableOpacity> 
    ); 
  }, 
}); 
 
const styles = StyleSheet.create({ 
  listViewStyle:{ 
    // 主轴方向 
    flexDirection:&#39;row&#39;, 
    // 一行显示不下,换一行 
    flexWrap:&#39;wrap&#39;, 
    // 侧轴方向 
    alignItems:&#39;center&#39;, // 必须设置,否则换行不起作用 
  }, 
 
  innerViewStyle:{ 
    width:cellWH, 
    height:cellWH, 
    marginLeft:vMargin, 
    marginTop:hMargin, 
    // 文字内容居中对齐 
    alignItems:&#39;center&#39; 
  }, 
 
  iconStyle:{ 
    width:80, 
    height:80, 
  }, 
 
}); 
 
AppRegistry.registerComponent(&#39;ListViewDemo&#39;, () => ListViewDemo);

効果は写真の通りです(データソースは自分で追加します)

以上がListView は 9 正方形グリッド効果のケースを実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。