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
  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',
      },
    ],
  ],
};

你可能感兴趣的:(ui,react,native,react.js,javascript,ecmascript)