前言

虽然RN自带了一些UI组件，但是根据RN的原理，组件库在ios和android表现是不一样的，如View、Text、Button等等组件最终渲染原生程序上后都是不一样的表现。例如Button组件，在ios上渲染后是文字，在android上渲染后是一个按钮。如果想渲染后的UI组件样式能够统一，那么就需要自己写组件或者使用第三方的ui组件库。这里使用的就是蚂蚁金服的antd-mobile-rn 组件库。

特性和优势

UI 样式高度可配置，拓展性更强，轻松适应各类产品风格
基于 React Native 的 iOS / Android / Web 多平台支持，组件丰富、能全面覆盖各类场景
提供 "组件按需加载" / "Web 页面高清显示" / "SVG Icon" 等优化方案，一体式开发
使用 TypeScript 开发，提供类型定义文件，支持类型及属性智能提示，方便业务开发
全面兼容 react

适用场景

适合于中大型产品应用
适合于基于 react-native 的多终端应用
适合不同 UI 风格的高度定制需求的应用

安装

安装条件：

目前稳定的版本是v4.0.5 ,所以react-native需要安装 0.57.x以上的版本。

安装还是比较简单的，参考antd-mobile-rn的github上的介绍。安装步骤如下：

npm install @ant-design/react-native --save

如果安装的是4.x版本（最新版本），那么需要安装以下的依赖

@react-native-community/slider
@react-native-community/viewpager
@react-native-community/masked-view
@react-native-community/segmented-control
@react-native-community/cameraroll
@react-native-community/async-storage
@react-native-community/picker

使用的命令如下：

npm i @react-native-community/slider @react-native-community/viewpager @react-native-community/masked-view @react-native-community/segmented-control @react-native-community/cameraroll @react-native-community/async-storage @react-native-community/picker -S

# 对于ios端
cd ios
pod install

此处有一个坑，其实这个坑主要源于antd-mobile-native官网更新不够及时导致的。因为这个网站上的安装说明并没有提到 ** npm install @ant-design/react-native ** 安装的是4.x 版本，所以自然没有提到上述安装那些依赖的事情，然后会导致运行工程总提示各种依赖没有安装等等。

链接字体图标以及自动链接

上述过程就完成了安装，由于 antd-mobile-rn 组件库里面使用了字体图标库，所以需要让原生系统关联这些字体。可以尝试使用如下命令：

# 手动链接字体图标
npx react-native link

在工程中按需加载组件

安装了之后，为了按需加载组件，需要安装 babel-plugin-import

npm i babel-plugin-import -D

在项目根目录创建 .babelrc 文件，内容如下：

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { libraryName: "@ant-design/react-native" }] // 与 Web 平台的区别是不需要设置 style
  ]
}

完成了上述配置后，就可以使用下面的方式来按需的加载组件了。

import { Button } from '@ant-design/react-native';

...省略代码

export default class index extends Component {
    goMyPage() {
        const { navigation } = this.props;
        navigation.navigate('My', {
            itemId: 86,
            otherParam: 'anything you want here',
        });
    }
    render() {
        return (
            <View style={styles.container}>
                <Text> Home </Text>
                <Button>default</Button>
            </View>
        )
    }
}

antd-mobile-rn 的使用

如果上述的安装过程能顺利完成，那么就可以愉快的使用组件了。比如下面就是一个简单的例子

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import Button from '@ant-design/react-native/lib/button';

class HelloWorldApp extends Component {
  render() {
    return <Button>Start</Button>;
  }
}

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

但是如果需要使用Modal以及Toast还需要在 App 的入口处加上Provider。

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { Button, Provider, Toast } from '@ant-design/react-native';

class HelloWorldApp extends Component {
  render() {
    return (
      <Provider>
        <Button onPress={() => Toast.info('This is a toast tips')}>
          Start
        </Button>
      </Provider>
    );
  }
}

至于其他的组件还需要详细的看官方网站的demo，这里就不在赘述了，因为官网的demo实在是太详细了。

React-Native 0.63踩坑之旅--antd-mobile-rn组件库的集成

目录

前言

安装

链接字体图标以及自动链接

在工程中按需加载组件

antd-mobile-rn 的使用