ホームページ > 記事 > ウェブフロントエンド > ListView は 9 正方形グリッド効果のケースを実装します。
この記事では、9 マスグリッド効果を実現するための React Native の ListView の例を主に紹介します。興味のある方は参考にしてください。
Android ネイティブ開発では、ListView が非常によく使われます。リスト コントロールでは、React Native (RN) はこの機能をどのように実装するのでしょうか? ListView のソース コードを見てみましょう
ListView は ScrollView に基づいて拡張されているため、ScrollView の関連プロパティがあります:
グリッドの効果を実現したい場合、上記の属性は基本的にいくつかの一般的なリスト要件を解決できます。このコンポーネントを使用して実現することもできます。このコンポーネントは、Android の RecyclerView コントロールに似ています。
<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={['#ff0000', '#00ff00', '#0000ff']} 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' 設定によって自動的に折り返されます。
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('点击了')}} > <View style={styles.innerViewStyle}> <Image source={{uri:rowData.icon}} style={styles.iconStyle} /> <Text>{rowData.title}</Text> </View> </TouchableOpacity> ); }, }); const styles = StyleSheet.create({ listViewStyle:{ // 主轴方向 flexDirection:'row', // 一行显示不下,换一行 flexWrap:'wrap', // 侧轴方向 alignItems:'center', // 必须设置,否则换行不起作用 }, innerViewStyle:{ width:cellWH, height:cellWH, marginLeft:vMargin, marginTop:hMargin, // 文字内容居中对齐 alignItems:'center' }, iconStyle:{ width:80, height:80, }, }); AppRegistry.registerComponent('ListViewDemo', () => ListViewDemo);効果は写真の通りです(データソースは自分で追加します)
以上がListView は 9 正方形グリッド効果のケースを実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。