react-native安装Ant Design

最新推荐文章于 2025-10-06 02:23:19 发布

原创最新推荐文章于 2025-10-06 02:23:19 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

react-native 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何将AntDesign集成到React Native项目中，并实现按需加载，通过具体步骤和示例代码展示了如何配置及使用AntDesign组件。

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>
    )
}

运行效果：
在这里插入图片描述