React Native Elements 4.0 安装与配置完全指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00923/article/details/148361418

React Native Elements 4.0 安装与配置完全指南

react-native-elements Cross-Platform React Native UI Toolkit 项目地址: https://gitcode.com/gh_mirrors/re/react-native-elements

React Native Elements 是一个广受欢迎的 React Native UI 组件库，它提供了大量高质量、可定制化的组件，帮助开发者快速构建美观的移动应用界面。本文将详细介绍 React Native Elements 4.0 版本的安装过程及常见配置问题解决方案。

核心安装方式

React Native Elements 4.0 采用了模块化设计，主要分为两个核心包：

@rneui/base - 包含基础组件
@rneui/themed - 提供主题化功能

稳定版安装

对于生产环境，建议安装稳定版本：

使用 npm：

npm install @rneui/themed @rneui/base

使用 yarn：

yarn add @rneui/themed @rneui/base

开发版安装

如需体验最新功能，可以安装开发版（Bleeding Edge）：

使用 npm：

npm install @rneui/base@edge @rneui/themed@edge

使用 yarn：

yarn add @rneui/base@edge @rneui/themed@edge

必备依赖项安装

React Native Elements 依赖于几个重要的第三方库，需要确保这些依赖正确安装。

图标库安装

React Native Elements 使用 react-native-vector-icons 来提供丰富的图标支持。

对于标准的 React Native 项目（非 Expo 项目）：

使用 npm：

npm install react-native-vector-icons
npx react-native link react-native-vector-icons

使用 yarn：

yarn add react-native-vector-icons
npx react-native link react-native-vector-icons

注意：React Native 0.60+ 版本会自动链接，如果遇到错误可以尝试运行 react-native unlink react-native-vector-icons

安全区域处理

为确保组件在不同设备上正确显示，需要安装 react-native-safe-area-context：

使用 npm：

npm install react-native-safe-area-context
npx react-native link react-native-safe-area-context

使用 yarn：

yarn add react-native-safe-area-context
npx react-native link react-native-safe-area-context

安装后，需要在应用最外层包裹 SafeAreaProvider：

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

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

Expo 项目集成

新建 Expo 项目

Expo 提供了专门的模板来快速创建包含 React Native Elements 的项目：

稳定版：

expo init app --template @rneui/template

开发版：

expo init app --template @rneui/template@edge

现有 Expo 项目

对于已有 Expo 项目，只需安装核心包即可，Expo 已经内置了所需的依赖项。

Web 平台适配

React Native Elements 也可以用于 Web 开发，通过 react-native-web 实现跨平台支持。

Create React App 配置

安装必要依赖：

yarn add @rneui/base @rneui/themed react-native-web react-native-vector-icons
yarn add --dev @babel/plugin-proposal-class-properties customize-cra react-app-rewired

创建 config-overrides.js 文件：

const path = require('path');
const { override, addBabelPlugins, babelInclude } = require('customize-cra');

module.exports = override(
  ...addBabelPlugins('@babel/plugin-proposal-class-properties'),
  babelInclude([
    path.resolve(__dirname, 'node_modules/@rneui/base'),
    path.resolve(__dirname, 'node_modules/@rneui/themed'),
    path.resolve(__dirname, 'node_modules/react-native-vector-icons'),
    path.resolve(__dirname, 'node_modules/react-native-ratings'),
    path.resolve(__dirname, 'src'),
  ])
);

修改 package.json 中的脚本：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

加载图标字体：

<style type="text/css">{`
  @font-face {
    font-family: 'MaterialIcons';
    src: url(${require('react-native-vector-icons/Fonts/MaterialIcons.ttf')}) format('truetype');
  }
  @font-face {
    font-family: 'FontAwesome';
    src: url(${require('react-native-vector-icons/Fonts/FontAwesome.ttf')}) format('truetype');
  }
`}</style>