Ant Design for React Native精简笔记

背景

Ant Design是一套不错的UI组件库，功能强大。但是依赖了很多其他的组件，在RN6.3以后要自己安装以下组件才能正常使用。

yarn add @react-native-community/cameraroll @react-native-community/picker @react-native-community/segmented-control @react-native-community/slider @react-native-community/viewpager @react-native-community/async-storage

随着RN版本的不断更新，这里有一些组件渐渐已经过时。或者有更好的替代了。

我以前也写过相关的文章：

• 《2020年React Native使用Ant Design Mobile RN组件》 https://blog.csdn.net/lxyoucan/article/details/108334465
• 《ReactNative AsyncLocalStorageUtil is defined multiple times》 https://blog.csdn.net/lxyoucan/article/details/121015173

虽然Ant Design非常火，但是不得不承认Ant Design for RN在RN开发者中并不火。而且更新的频率不太高。因为有很多更好的选择。在我看来Ant Design for RN还是有些臃肿了，依赖太多会导致APP体积增加。对于极简主义的我还是不能接受的。

随着编码能力的提升，有很多组件可以自己设计出来了。Ant Design for RN在我的项目中渐渐的可有可无，但是为了照顾以前开发的老组件，我就萌生了自己实现一些我们项目中常用的Ant 组件的想法。

grid组件

这个是我用的最多的组件，没有之一。用起来比较方便。如果不用Ant Design for RN怎么来自己实现呢？我自己在实现的过程中，发现Ant Design for RN本身就是开源的。所以就直接把源码拿过来简单修改就可以使用了。 源码地址： https://github.com/ant-design/ant-design-mobile-rn/blob/master/components/grid/index.tsx

主要代码如下，其他的依赖的内容可以原封不动从Ant Design for RN源码中复制，这里我就不浪费版面了。

import React from 'react';
import {
  Dimensions,
  Image,
  StyleProp,
  StyleSheet,
  Text,
  ViewStyle,
} from 'react-native';
import Flex from '../flex/index';
import {DataItem, GridPropsType} from './PropsType';
//import GridStyles from './style/index';

//定义接口
export interface GridProps extends GridPropsType {
  itemStyle?: StyleProp;
}

//定义Grid的属性
export default class Grid extends React.Component {
  static defaultProps: GridProps = {
    data: [],
    hasLine: true,
    isCarousel: false,
    columnNum: 4,
    carouselMaxRow: 2,
    itemStyle: {},
  };

  //获取每个表格的样式，高度根据屏幕宽度计算得出
  getFlexItemStyle(columnNum: number) {
    return {
      height: Dimensions.get('window').width / columnNum,
      borderRightWidth: this.props.hasLine ? StyleSheet.hairlineWidth : 0,
    };
  }

  render() {
    //获取相关属性参数
    const {data, hasLine, onPress = () => {}} = this.props;
    //获取列数
    const columnNum = this.props.columnNum;
    //获取用户自定义的样式
    const customItemStyle = this.props.itemStyle;
    //设置最大的行数
    //获取数据的长度
    const dataLength = (data && data.length) || 0;
    //计算行数
    const rowCount = Math.ceil(dataLength / columnNum);
    //如果用户传递属性了，则使用用户传递的方法，否则使用默认的方法
    const renderItem =
      this.props.renderItem ||
      ((dataItem: DataItem, index: number) => (
         onPress(dataItem, index)}>
          {React.isValidElement(dataItem.icon) ? (
            dataItem.icon
          ) : (
            // 如果不是react组件，则显示图片
            
          )}
          {dataItem.text}
        
      ));

    //获取每一个item的样式
    const flexItemStyle = this.getFlexItemStyle(columnNum);
    const rowsArr: any[] = []; //用于存储所有的item

    //处理每一行的数据
    for (let i = 0; i