一明垢、react-native-elements
- 官網(wǎng)：https://reactnativeelements.com/
- 安裝。
npm install react-native-elements
npm install react-native-vector-icons
npm install react-native-safe-area-context
# 使用最新版鸵鸥，可能會(huì)版本沖突奠滑。如果報(bào)錯(cuò)，提示里有可用版本。
npm install react-native-safe-area-context@3.4.1
- 使用
react-native@0.60.0以下的版本宋税，需要手動(dòng)鏈接（能看到這篇文章的摊崭，應(yīng)該用的都是60以上吧....）
npx react-native link react-native-vector-icons
npx react-native link react-native-safe-area-context
- 安裝了react-native-safe-area-context后，需要添加SafeAreaProvider到應(yīng)用程序的外部弃甥。官網(wǎng)建議的方法如下
import { SafeAreaProvider } from 'react-native-safe-area-context';
function App() {
return <SafeAreaProvider>...</SafeAreaProvider>;
}
- 啟動(dòng)后可能出現(xiàn)的問題：
react-native-vector-icons 圖標(biāo)顯示為 x 或者 爽室？
解決方法：進(jìn)入android/app/build.gradle文件，添加如下內(nèi)容：
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
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="帶螞蟻圖標(biāo)的按鈕"
buttonStyle={{width: 100}}
/>
二瓶珊、antd-mobile-rn
- 官網(wǎng)：https://rn.mobile.ant.design/index-cn
- 安裝
npm install antd-mobile-rn --save
- 按需加載組件功能
- 使用 babel-plugin-import (官方推薦)
npm install babel-plugin-import --save-dev
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'import',
{
libraryName: 'antd-mobile-rn',
},
],
],
};
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
