ListView는 9제곱 그리드 효과 사례를 구현합니다.

이 글에서는 9제곱 그리드 효과를 구현하기 위한 React Native의 ListView 예제를 주로 소개합니다. 관심 있는 친구들은 참고해 보세요.

Overview

ListView는 매우 일반적으로 사용됩니다. 목록 컨트롤, 그렇다면 React Native(RN)는 이 기능을 어떻게 구현합니까? ListView의 소스 코드를 살펴보겠습니다.

ListView는 ScrollView를 기반으로 확장되므로 ScrollView의 관련 속성이 있습니다:

dataSource: 데이터 소스, Android에서 BaseAdapter에 전달하는 데이터 컬렉션과 유사 .

renderRow: BaseAdapter의 getItem 메서드와 유사하게 특정 행을 렌더링합니다.

onEndReached: 간단히 말해서 페이징 작업에 사용됩니다. Android의 기본 개발에서는 해당 메서드를 직접 구현해야 합니다.

onEndReachedThreshold: onEndReached를 호출하기 전의 임계값, 단위는 픽셀입니다.

refreshControl: RefreshControl 구성 요소를 지정하여 ScrollView에 대한 풀다운 새로 고침 기능을 제공합니다. (이 속성은 ScrollView에서 상속됩니다.)

renderHeader: Android ListView의 addHeader와 유사하게 헤드 뷰를 렌더링합니다.

위 속성은 기본적으로 그리드의 효과를 얻으려는 경우 몇 가지 일반적인 목록 요구 사항을 해결할 수 있습니다. Android의 RecyclerView 컨트롤과 다소 유사한 이 구성 요소의 도움을 받아도 달성할 수 있습니다.

pageSize: 렌더링된 그리드 수. Android GridView의 numColumns와 유사합니다.

contentContainerStyle: 이 속성은 ScrollView에서 상속되며 주로 이 구성 요소의 콘텐츠 컨테이너에 적용됩니다.

ListView를 사용하여 9제곱 그리드 효과를 얻으려면:

1. 페이지 크기를 구성하여 그리드 수를 확인합니다.

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!