一、react-native-elements
- 进根目录搞起。
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
- 使用
react-native@0.60.0
以下的版本,需要手动链接(能看到这篇文章的,应该用的都是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
npm install antd-mobile-rn --save
- 按需加载组件功能
- 使用 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',
},
],
],
};