博客

React-Native 使用第三方 UI

  • Post author:
  • Post category:其他


一、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

  • 使用

    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"


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

  1. 按需加载组件功能
  • 使用 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',
      },
    ],
  ],
};


版权声明：本文为a137464462原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。