主要计算方式:

 //   获取屏幕宽度
    let screenW = Dimensions.get('window').width;
    // 设置列,img宽高
    let cols = 3,
      boxW = 100,
      boxH = 120;
    //   设置水平间距
    let hMargin = (screenW - boxW * cols) / (cols + 1);
    //垂直间距
    let vMargin = 20;

 代码:

import React, {Component} from 'react';
import {View, Text, Dimensions, Image, StyleSheet} from 'react-native';

export default class ImageDemo extends Component {
  render() {
    return <View style={styles.container}>{this._rendItem()}</View>;
  }
  //   做一个九宫格布局
  _rendItem() {
    //   获取屏幕宽度
    let screenW = Dimensions.get('window').width;
    // 设置列,img宽高
    let cols = 3,
      boxW = 100,
      boxH = 120;
    //   设置水平间距
    let hMargin = (screenW - boxW * cols) / (cols + 1);
    //垂直间距
    let vMargin = 20;
    // 本地模拟的json数据
    let dataArr = require('../assets/localData/packageData.json');
    console.log(dataArr);

    let itemArr = [];
    dataArr.forEach((item, i) => {
      itemArr.push(
        <View
          key={i}
          style={{
            width: boxW,
            height: boxH,
            // 内容对齐
            justifyContent: 'center',
            alignItems: 'center',
            marginLeft: hMargin,
            marginTop: vMargin,
          }}>
          {/* <Image source={{uri: item.icon}} style={{width: 80, height: 80}} /> */}
          <View style={{width: 80, height: 80, backgroundColor: 'cyan'}} />
          <Text>{item.name}</Text>
        </View>,
      );
    });

    return itemArr;
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    // 主轴方向
    flexDirection: 'row',
    // 换行
    flexWrap: 'wrap',
  },
});