react-native安装Ant Design

1.集成Ant Design到项目

项目根目录中执行命令：

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

2.集成按需加载babel-plugin-import到项目

项目根目录中执行命令：

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

3.创建.babelrc文件

根目录中创建新文件，命名为.babelrc，编辑内容为：

{
    "presets": [
      "module:metro-react-native-babel-preset"
    ],
    "plugins": [
      [
        "import",
        {
            "libraryName": "@ant-design/react-native"
        }
      ]
    ]
}

如图：

4.使用Ant控件

例如使用Ant中的Button：

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

const recommendArticle = () => {

    const articleItem = ({ item }) =>  (
        <TouchableOpacity style={styles.item}>
            <Text style={styles.itemTitle}>{item.title}</Text>
            <View style={styles.itemBottonView}>
                <Text style={styles.itemBottonText}>{item.count}</Text>
                <Text style={styles.itemBottonText}>{item.progress > 0 ? '已学' + item.progress*100 + '%' : '未学习' }</Text>
            </View>
        </TouchableOpacity>
    )

    return (
        <SafeAreaView>
            <Button type='primary' size={'large'} style={{margin:16}}>登陆</Button>
        </SafeAreaView>
    )
}

运行效果：