react-native项目引入ant-design

之前试过引入多次ant-design,引用代码$ npm install antd-mobile --save官网这个。一直报错类似某个css不能resolve。应该是普通的css在reactnative中不能识别使用。

react-native mobile的官方地址：https://mobile.ant.design/index-cn
demo演示地址：https://mobile.ant.design/kitchen-sink/

• 引入 yarn add @ant-design/react-native

• 根目录下新建文件.babelrc (用于ant-design库的按需引入)

//代码如下
{
    "plugins": [
        [
            "import",
            {
                "libraryName": "@ant-design/react-native"
            }
        ]
    ]
}

• 运行之后可能报错：没有模块：babel-plugin-import。没有报错请跳过。

运行yarn add babel-plugin-import即可。

• 页面上引入方式：

import {Flex,WhiteSpace} from '@ant-design/react-native';
<Flex>
            <Flex.Item><Text>1</Text></Flex.Item>
            <Flex.Item><Text>2</Text></Flex.Item>
            <Flex.Item><Text>3</Text></Flex.Item>
          </Flex>  
          <WhiteSpace size="lg" />