React-Native 使用第三方 UI

一、react-native-elements

1. 官网：https://reactnativeelements.com/
2. 安装。

• 进根目录搞起。

npm install react-native-elements
npm install react-native-vector-icons
npm install react-native-safe-area-context
# 使用最新版，可能会版本冲突。如果报错，提示里有可用版本。
npm install react-native-safe-area-context@3.4.1

• 使用[email protected]以下的版本，需要手动链接(能看到这篇文章的，应该用的都是60以上吧....)

npx react-native link react-native-vector-icons
npx react-native link react-native-safe-area-context

• 安装了react-native-safe-area-context后，需要添加SafeAreaProvider到应用程序的外部。官网建议的方法如下

import { SafeAreaProvider } from 'react-native-safe-area-context';

function App() {
  return <SafeAreaProvider>...SafeAreaProvider>;
}

• 启动后可能出现的问题：
  react-native-vector-icons 图标显示为 x 或者 ？
  解决方法：进入android/app/build.gradle文件，添加如下内容：

applyfrom: "../../node_modules/react-native-vector-icons/fonts.gradle"

• 示例
  react-native-vector-icons里面包含了好多库。包含AntDesign库在内。注意引用语法。
  react-native-vector-icons 图标名称查找：https://oblador.github.io/react-native-vector-icons/

import AntDesign from 'react-native-vector-icons/AntDesign';
import {Button} from 'react-native-elements';


<AntDesign name="addusergroup" size={20} color={'#00ff00'} />
<Button
  title="Loading button"
  loading
/>
<Button
  icon={<AntDesign name="addusergroup" size={15} color="white" />}
  title="带蚂蚁图标的按钮"
  buttonStyle={{width: 100}}
/>

二、antd-mobile-rn

1. 官网：https://rn.mobile.ant.design/index-cn
2. 安装

npm install antd-mobile-rn --save

3. 按需加载组件功能

• 使用 babel-plugin-import (官方推荐)

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

• 修改.babel.config.js配置如下:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'import',
      {
        libraryName: 'antd-mobile-rn',
      },
    ],
  ],
};