React Native 集成@ant-design/react-native 3.X

React Native 集成@ant-design/react-native 3.X

1、安装

• 官方链接:https://rn.mobile.ant.design/docs/react/introduce-cn

#安装
npm install @ant-design/react-native --save

#链接所有图标
react-native link @ant-design/icons-react-native

2、按需加载

1):安装babel-plugin-import

#安装打包插件
npm install --save-dev  babel-plugin-import

2):修改.babelrc文件

#添加内容
 "plugins": [
        ["import", { "libraryName": "@ant-design/react-native" }]
      ]

3、处理@ant-design/react-native 3.X 部分组件失效问题

1):集成react-navigation

• 参考链接:https://blog.csdn.net/weixin_44187730/article/details/86092782

2):修改App.js入口文件

import React from "react";
import {
   createAppContainer, createStackNavigator} from "react-navigation";
import {
   Provider} from '@ant-design/react-native';
import {
   ToastExample} from "./src/component/ToastExample";
import {
   BasicModalExample} from "./src/component/BasicModalExample";

//变量名称可变
const RootNavigator = createStackNavigator({
   
    ToastExample: {
   
        screen: ToastExample,
        navigationOptions: {
   
            title: 'ToastExample'
        }
    },
    BasicModalExample: {
   
        screen: BasicModalExample,
        navigationOptions: {
   
            title: 'BasicModalExample'
        }
    }
}, {
   
    //默认访问哪个导航
    initialRouteName: 'ToastExample'
});

//变量名称可变
const AppNav = createAppContainer(RootNavigator);

//暴露出的导航组件类、必须用<Provider>标签包裹
export default class App extends React.Component {
   

    render() {
   
        return (
            <Provider>
                <AppNav/>
            </Provider>
        );
    }
}

特别注意:暴露出的导航组件类、必须用标签包裹、否则部分组件无法使用

3):部分UI效果

ToastExample

import React from 'react';
import {
   DeviceEventEmitter} from 'react-native';
import {
   Button, portal, Provider, Toast, WhiteSpace, WingBlank,} from '@ant-design/react-native';

function showToast() {
   
    // multiple toast
    Toast.info('This is a toast tips 1 !!!', 4);
    Toast.info('This is a toast tips 2 !!!', 3);
    Toast.info('This is a toast tips 3 !!!', 1);
}

function successToast() {
   
    Toast.success('Load success !!!', 1);
}

function showToastNoMask() {
   
    Toast.info('Toast without mask !!!', 1, undefined, false);
}

function failToast() {
   
    Toast.fail('Load failed !!!');
}

function offline() {
   
    Toast.offline('Network connection failed !!!');
}

function loadingToast() {
   
    Toast.loading('Loading...', 1, () => {
   
        console.log('Load complete !!!')