Expo 中使用Ant Design组件

Expo全家桶，在某种程度上是可以降低入门难度，准备尝试使用一下，在安装我常用的UI组件Ant Design组件时却报错了。过程记录下来。要把npm install 换成expo install 就可以正常安装组件了，原因不详。

安装组件

expo install @ant-design/react-native

使用上面的命令完成安装即可，如果使用npm install @ant-design/react-native --save命令安装，会报一些错，原因暂时不清楚。

 按需加载配置

expo install babel-plugin-import

修改babel.config.js配置

plugins: [
    ['import', {libraryName: '@ant-design/react-native'}], // 与 Web 平台的区别是不需要设置 style
  ],

修改完以后如下：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      ['import', {libraryName: '@ant-design/react-native'}], // 与 Web 平台的区别是不需要设置 style
    ],
  };
};

至此普通组件已经可以正常使用了。

我的代码如下：

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Button } from '@ant-design/react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <Button>Hello</Button>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

 加载字体图标

代码样例：

import {StatusBar} from 'expo-status-bar';
import React,{useEffect} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {Button, Icon} from '@ant-design/react-native';
import * as Font from 'expo-font';
import { AppLoading} from 'expo';

export default class App extends React.Component {
    state = {
        isReady: false,
    };
    async componentDidMount() {
        await Font.loadAsync(
            'antoutline',
            // eslint-disable-next-line
            require('@ant-design/icons-react-native/fonts/antoutline.ttf')
        );

        await Font.loadAsync(
            'antfill',
            // eslint-disable-next-line
            require('@ant-design/icons-react-native/fonts/antfill.ttf')
        );
        // eslint-disable-next-line
        this.setState({ isReady: true });
    }
    render() {
        const {isReady } = this.state;
        if (!isReady) {
            return <AppLoading />;
        }
        return (
            <View style={styles.container}>
                <Button><Icon name={"alert"} color={"red"} />图标可以正常显示了</Button>
                <StatusBar style="auto" />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

 

至此教程结束。

参考：

https://rn.mobile.ant.design/docs/react/introduce-cn