第三方组件库 - wangshengliang

通过前面的学习，我们已经将 RN 官方所提供的内置组件快速过了一遍，但是官方所提供的组件往往是比较基础且局限的，此时我们就可以使用一些第三方组件库来提高我们的开发效率。

本小节我们就一起来看一下 RN 常见的第三方组件库有哪些，并且以 NativeBase 为例做一个第三方组件库的使用示例。

本小节包含以下内容：

RN 常见第三方组件库
NativeBase 使用示例

RN 常见第三方组件库#

1. NativeBase 组件库

NativeBase 是一个广受欢迎的 UI 组件库，为 RN 提供了数十个跨平台组件。在使用 NativeBase 时，你可以使用任意开箱即用的第三方原生库，而这个项目本身也拥有一个丰富的生态系统，从有用的入门套件到可定制的主题模板。

NativeBase 官网地址：https://nativebase.io/

2. Ant Design Mobile RN 组件库

Ant Design Mobile RN 是由蚂蚁金服推出的 RN 组件库，如果是 React 的开发者都会对 React 的常用组件库 Ant Design 有所耳闻，而 Ant Design Mobile RN 则是蚂蚁金服在 RN 方向的延伸。

特点如下：

UI 样式高度可配置，拓展性更强，轻松适应各类产品风格
基于 React Native 的 iOS / Android / Web 多平台支持，组件丰富、能全面覆盖各类场景 (antd-mobile)
提供 “组件按需加载” / “Web 页面高清显示” / “SVG Icon” 等优化方案，一体式开发
使用 TypeScript 开发，提供类型定义文件，支持类型及属性智能提示，方便业务开发
全面兼容 react

Ant Design Mobile RN 官网地址：https://rn.mobile.ant.design/index-cn

3. React Native Elements 组件库

React Native Elements 是一个高度可定制的跨平台 UI 工具包，完全用 Javascript 构建。该库的作者声称“React Native Elements 的想法更多的是关于组件结构而不是设计，这意味着在使用某些元素时可以减少样板代码，但可以完全控制它们的设计”，这对于开发新手和经验丰富的老手来说都很有吸引力。

React Native Elements 官网地址：https://reactnativeelements.com/

4. React Native Material 组件库

React Native Material UI 是一组高度可定制的 UI 组件，实现了谷歌的 Material Design。请注意，这个库使用了一个名为 uiTheme 的 JS 对象，这个对象在上下文间传递，以实现最大化的定制化能力。

React Native Material 官网地址：https://www.react-native-material.com/

5. Nachos UI 组件库

Nachos UI 是一个 RN 组件库，提供了 30 多个可定制的组件，这些组件也可以通过 react-native-web 在 Web 上运行。它通过了快照测试，支持格式化和 yarn，提供了热火的设计和全局主题管理器。

Nachos UI 官网地址：https://avocode.com/nachos-ui

6. React Native Paper 组件库

React Native Paper 是一个跨平台的 UI 组件库，它遵循 Material Design 指南，提供了全局主题支持和可选的 babel 插件，用以减少捆绑包大小。

React Native Paper 官网地址：https://callstack.github.io/react-native-paper/

NativeBase 使用示例#

上面罗列了很多 RN 的第三方组件库，但并不是说每一个我们都需要去学习，在开发时选择一个自己用的惯的来使用即可。

这里我们以第一个 NativeBase 为例来演示如何使用第三方组件库。

要使用第三方组件库，首先第一步需要进行安装。

官方提供了安装指南：https://docs.nativebase.io/installation

可以看到，在安装指南中，官方根据开发者不同形式搭建的 RN 项目，提供了对应的安装方式。

由于我们目前的 RN 项目是使用 expo 搭建的，因此选择对应的安装指南。

上面分为了“新项目”和“已有项目”，选择已有项目，然后根据指南输入下面的指令：

npm install native-base
expo install react-native-svg
expo install react-native-safe-area-context

注：安装过程中可能会涉及到科学上网，请自行解决网络问题

当然，你也可以选择基于 NativeBase 组件库创建一个全新的项目，命令为：

expo init my-app --template @native-base/expo-template

具体的操作如下图所示：

最后，我们可以测试一下组件库是否安装成功。

下面的代码是创建一个全新的 NativeBase 项目时，根组件 App.js 所对应的代码：

import React from 'react'
import {
  Text,
  Link,
  HStack,
  Center,
  Heading,
  Switch,
  useColorMode,
  NativeBaseProvider,
  extendTheme,
  VStack,
  Button,
  Box,
} from 'native-base'
import NativeBaseIcon from './components/NativeBaseIcon'

// Define the config
const config = {
  useSystemColorMode: false,
  initialColorMode: 'dark',
}

// extend the theme
export const theme = extendTheme({ config })

export default function App() {
  return (
    <NativeBaseProvider>
      <Center
        _dark={{ bg: 'blueGray.900' }}
        _light={{ bg: 'blueGray.50' }}
        px={4}
        flex={1}
      >
        <VStack space={5} alignItems="center">
          <NativeBaseIcon />
          <Heading size="lg">Welcome to NativeBase</Heading>
          <HStack space={2} alignItems="center">
            <Text>Edit</Text>
            <Box
              _web={{
                _text: {
                  fontFamily: 'monospace',
                  fontSize: 'sm',
                },
              }}
              px={2}
              py={1}
              _dark={{ bg: 'blueGray.800' }}
              _light={{ bg: 'blueGray.200' }}
            >
              App.js
            </Box>
            <Text>and save to reload.</Text>
          </HStack>
          <Button onPress={() => console.log('hello world')}>Click Me</Button>
          <Link href="https://docs.nativebase.io" isExternal>
            <Text color="primary.500" underline fontSize={'xl'}>
              Learn NativeBase
            </Text>
          </Link>
          <ToggleDarkMode />
        </VStack>
      </Center>
    </NativeBaseProvider>
  )
}

// Color Switch Component
function ToggleDarkMode() {
  const { colorMode, toggleColorMode } = useColorMode()
  return (
    <HStack space={2} alignItems="center">
      <Text>Dark</Text>
      <Switch
        isChecked={colorMode === 'light'}
        onToggle={toggleColorMode}
        aria-label={
          colorMode === 'light' ? 'switch to dark mode' : 'switch to light mode'
        }
      />
      <Text>Light</Text>
    </HStack>
  )
}

在根组件中引入了 NativeBaseIcon 组件，该组件位于 components 目录下面：

import React from 'react'
import { Icon } from 'native-base'
import { G, Path } from 'react-native-svg'
const NativeBaseIcon = () => {
  return (
    <Icon size="220px" viewBox="0 0 602.339 681.729">
      <G
        id="Group_403"
        data-name="Group 403"
        transform="translate(14575 1918.542)"
      >
        <Path
          id="Path_1"
          data-name="Path 1"
          d="M488.722,0A45.161,45.161,0,0,1,527.83,22.576L675.676,278.584a45.162,45.162,0,0,1,0,45.171L527.83,579.763a45.162,45.162,0,0,1-39.108,22.576H193.008A45.162,45.162,0,0,1,153.9,579.763L6.053,323.755a45.162,45.162,0,0,1,0-45.171L153.9,22.576A45.162,45.162,0,0,1,193.008,0Z"
          transform="translate(-13972.661 -1918.542) rotate(90)"
          fill="#356290"
        />
        <Path
          id="Path_252"
          data-name="Path 252"
          d="M401.1,0A60.816,60.816,0,0,1,453.77,30.405L567.2,226.844a60.816,60.816,0,0,1,0,60.82L453.77,484.1A60.816,60.816,0,0,1,401.1,514.509H174.241A60.816,60.816,0,0,1,121.575,484.1L8.149,287.665a60.816,60.816,0,0,1,0-60.82L121.575,30.405A60.816,60.816,0,0,1,174.241,0Z"
          transform="translate(-14016.576 -1865.281) rotate(90)"
          fill="#1784b2"
        />
        <Path
          id="Path_251"
          data-name="Path 251"
          d="M345.81,0a36.573,36.573,0,0,1,31.674,18.288L480.566,196.856a36.573,36.573,0,0,1,0,36.569L377.484,411.993a36.573,36.573,0,0,1-31.674,18.288H139.655a36.572,36.572,0,0,1-31.674-18.288L4.9,233.425a36.573,36.573,0,0,1,0-36.569L107.981,18.288A36.573,36.573,0,0,1,139.655,0Z"
          transform="translate(-14058.69 -1820.41) rotate(90)"
          fill="#50bfc3"
        />
        <Path
          id="_x3C__x2F__x3E_"
          d="M187.066,335.455V297.993l-65.272-21.949,65.272-22.523V216.059L81,259.5v32.521Zm38.726,29.3L286.123,174H256.7l-60.33,190.759Zm72.052-29.3,106.066-43.783V259.267L297.844,216.059V254.44l59.3,23.328-59.3,19.421Z"
          transform="translate(-14516.286 -1846.988)"
          fill="#fff"
        />
      </G>
    </Icon>
  )
}

export default NativeBaseIcon

效果如下图所示：

至此，我们就成功了引入了 NativeBase 组件库，之后要使用该组件库中的某一个组件，只需要按照文档说明引入然后使用即可。