React Native 如何使用Ant-design组件库

前言

前段时间在做自己的开源react-native项目中使用到了蚂蚁金服的开源组件库：Ant Design Mobile，今天咱们就简单介绍下这个组件库如何接入和使用

Ant Design官方定义：

Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。它模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界，将进行 UE 设计和 UI 设计人员统称为『设计者』，利用统一的规范进行设计赋能，全面提高中台产品体验和研发效率。

antd-mobile官方定义：

antd-mobile is the React implementation of the Ant Design's mobile specification, serving the ant and koubei wireless service.

直接查看官方文档请点击

查看官方Git仓库请点击

当然，Ant-Design组件库分为web端和手机端，web端为antd，手机端为antd-mobile。我们在开发RN项目时，使用的是手机端组件库。

如何接入

接入antd-mobile组件库只需要简单的几步即可完成，相对来说还是比较简单的。

• 确保你已近有可以正常运行的react环境和react-native项目，如果没有项目创建一个新的demo项目即可。
• $ npm install antd-mobile --save

注意：当你install完成之后，在重新运行程序，可能会报下面的错误：(没有报错误的同学们请忽略！)

react-dom报错

根据错误提示，发现我们的项目中缺少react-dom这个模块，我们执行npm install react-dom --save即可。

• npm install babel-plugin-import --save-dev

• 在项目跟目录下找到.babelrc文件,然后使用文本编辑工具打开，添加这样一行代码"plugins": [["import", { "libraryName": "antd-mobile"，然后保存退出。

babelrc

.babelrc文件内容如下：

{
  "plugins": [["import", { "libraryName": "antd-mobile" }]],
  "presets": ["react-native"]
}

如何使用

antd-mobile 组件的使用也是相当的简单，和使用rn原生的组价没有什么太大的区别。这里我们就随便找了三个组件演示。

如果想直接运行demo查看效果请点击

先看作者的Demo项目效果图：

demo

使用步骤

• import { Button } from 'antd-mobile'

• return (这是Ant-D的一个按钮组件，使用方式简单吧。)

Demo工程实例代码

/**
 * Ant-designDemo
 * 作者Git：https://github.com/guangqiang-liu
 * 技术交流群：620792950
 * 作者QQ：1126756952
 * @guangqiang
 */
import React, { Component } from 'react'
import {
  StyleSheet,
  View
} from 'react-native'

import { Button, NoticeBar, SearchBar, SegmentedControl} from 'antd-mobile'

export default class App extends Component<{}> {
  state = {
    value: '',
  }
  
  onScrollChange = (value) => {
    console.log(value)
  }

  handleClick = () => {
    this.manualFocusInst.focus()
  }

  clear = () => {
    this.setState({ value: '' })
  }

  render() {
    return (
      
         console.log(value, 'onSubmit')}
          onClear={value => this.clear(value, 'onClear')}
          onFocus={() => console.log('onFocus')}
          onBlur={() => console.log('onBlur')}
          onCancel={() => this.clear('onCancel')}
          showCancelButton
          onChange={this.onChange}
        />
        
        
          Notice: The arrival time of incomes and transfers of Yu 'E Bao will be delayed during National Day.
        
        Start
      
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
})

注意事项

• 在深入学习研究Ant Design React之前，需要了解一些 ES5、ES6的常用语法知识。
• 确保你的Node.js环境：Node.js(> v4.x)

福利时间

• 作者React Native开源项目OneM地址(按照企业开发标准搭建框架设计开发)：https://github.com/guangqiang-liu/OneM (欢迎小伙伴们 star)
• 作者主页：包含50多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 (欢迎小伙伴们：多多关注，多多点赞)
• 作者React Native QQ技术交流群：620792950 欢迎小伙伴进群交流学习
• 友情提示：在开发中有遇到RN相关的技术问题，欢迎小伙伴加入交流群（620792950），在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家，谢谢支持！