Thêm Một Lưới Ảnh Tùy Chỉnh và Linh Hoạt vào Dự Án React Native Của Bạn

react-native-photo-grid

Thư viện React Native giúp xử lý những phức tạp trong việc xây dựng lưới ảnh với số lượng ảnh linh hoạt trên mỗi hàng

Cài Đặt

npm install react-native-photo-grid --save

Sử Dụng

import React from 'react-native';
import PhotoGrid from 'react-native-photo-grid';
let { Image, TouchableOpacity, Text } = React;

class BestGrid extends React.Component {

  constructor() {
    super();
    this.state = { items: [] };
  }

  componentDidMount() {
    // Build an array of 60 photos
    let items = Array.apply(null, Array(60)).map((v, i) => {
      return { id: i, src: 'http://placehold.it/200x200?text='+(i+1) }
    });
    this.setState({ items });
  }

  render() {
    return(
      <PhotoGrid
        data = { this.state.items }
        itemsPerRow = { 3 }
        itemMargin = { 1 }
        renderHeader = { this.renderHeader }
        renderItem = { this.renderItem }
      />
    );
  }

  renderHeader() {
    return(
      <Text>I'm on top!</Text>
    );
  }

  renderItem(item, itemSize) {
    return(
      <TouchableOpacity
        key = { item.id }
        style = {{ width: itemSize, height: itemSize }}
        onPress = { () => {
          // Do Something
        }}>
        <Image
          resizeMode = "cover"
          style = {{ flex: 1 }}
          source = {{ uri: item.src }}
        />
      </TouchableOpacity>
    )
  }

}

export default BestGrid;

.gitignore

# Logs
logs
*.log
npm-debug.log*

# Runtime data
pids
*.pid
*.seed

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directory
node_modules

# Optional npm cache directory
.npm

# Optional REPL history
.node_repl_history

Chi Tiết Tải Về:

Tác Giả: christopherabouabdo
Nguồn: https://github.com/christopherabouabdo/react-native-photo-grid

Giấy Phép: MIT license

Cảm ơn bạn!