React Native 全栈开发实战班 - 用户界面进阶之流行 UI 库使用与集成

在 React Native 应用开发中，使用现成的 UI 库可以显著提高开发效率，并确保应用界面的美观和一致性。React Native 生态系统中有许多优秀的 UI 库，如 React Native Paper 、React Native Elements 、NativeBase 等。本章节将介绍如何使用和集成这些流行的 UI 库，并展示如何利用它们快速构建高质量的用户界面。

---

4.1 流行 UI 库概述

以下是一些常见的 React Native UI 库：

1. React Native Paper

   • 简介： 基于 Material Design 的跨平台 UI 组件库。
   • 特点： 提供丰富的 Material Design 组件，支持主题定制，性能优异。
   • GitHub 地址： https://github.com/callstack/react-native-paper

2. React Native Elements

   • 简介： 一套跨平台的 UI 组件库，样式简洁，易于使用。
   • 特点： 提供丰富的组件，支持主题定制，文档完善。
   • GitHub 地址： https://github.com/react-native-elements/react-native-elements

3. NativeBase

   • 简介： 强大的跨平台 UI 组件库，支持多种主题和插件。
   • 特点： 提供丰富的组件，支持主题定制和插件扩展，社区活跃。
   • GitHub 地址： https://github.com/GeekyAnts/NativeBase

4. Ant Design Mobile RN

   • 简介： 基于 Ant Design 的 React Native UI 组件库。
   • 特点： 提供丰富的企业级组件，支持主题定制，文档完善。
   • GitHub 地址： https://github.com/ant-design/ant-design-mobile-rn

本章节将以 React Native Paper 为例，介绍如何使用和集成 UI 库。

---

4.2 使用 React Native Paper

React Native Paper 是一个基于 Material Design 的跨平台 UI 组件库，提供了丰富的组件和主题定制功能。

4.2.1 安装 React Native Paper

npm install react-native-paper

4.2.2 配置主题

React Native Paper 使用主题来控制组件的样式。可以通过 Provider 组件设置全局主题。

// App.js
import React from 'react';
import { Provider as PaperProvider } from 'react-native-paper';
import { NavigationContainer } from '@react-navigation/native';
import MainNavigator from './navigation/MainNavigator';

const theme = {
  // 自定义主题
  colors: {
    primary: '#6200ee',
    accent: '#03dac4',
    background: '#fff',
    text: '#000',
  },
};

const App = () => {
  return (
    <PaperProvider theme={theme}>
      <NavigationContainer>
        <MainNavigator />
      </NavigationContainer>
    </PaperProvider>
  );
};

export default App;

4.2.3 使用 UI 组件

React Native Paper 提供了丰富的 UI 组件，如 Button, TextInput, Card, Appbar, Drawer 等。

示例：使用 Button 组件

// components/MyButton.js
import React from 'react';
import { Button } from 'react-native-paper';
import { View, StyleSheet } from 'react-native';

const MyButton = ({ title, onPress }) => {
  return (
    <View style={styles.container}>
      <Button mode="contained" onPress={onPress}>
        {title}
      </Button>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    margin: 10,
  },
});

export default MyButton;

示例：使用 TextInput 组件

// components/FormInput.js
import React from 'react';
import { TextInput, HelperText } from 'react-native-paper';
import { View, StyleSheet } from 'react-native';

const FormInput = ({ label, value, onChangeText, error }) => {
  return (
    <View style={styles.container}>
      <TextInput
        label={label}
        value={value}
        onChangeText={onChangeText}
        style={styles.input}
      />
      {error && <HelperText type="error">{error}</HelperText>}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    margin: 10,
  },
  input: {
    backgroundColor: '#fff',
  },
});

export default FormInput;

示例：使用 Card 组件

// components/MyCard.js
import React from 'react';
import { Card, Title, Paragraph } from 'react-native-paper';
import { View, StyleSheet } from 'react-native';

const MyCard = ({ title, description }) => {
  return (
    <Card style={styles.card}>
      <Card.Content>
        <Title>{title}</Title>
        <Paragraph>{description}</Paragraph>
      </Card.Content>
    </Card>
  );
};

const styles = StyleSheet.create({
  card: {
    margin: 10,
  },
});

export default MyCard;

4.2.4 主题定制

React Native Paper 支持主题定制，可以通过 Provider 组件传递自定义主题对象。

示例：

// App.js
import React from 'react';
import { Provider as PaperProvider } from 'react-native-paper';
import { NavigationContainer } from '@react-navigation/native';
import MainNavigator from './navigation/MainNavigator';

const theme = {
  colors: {
    primary: '#ff5722',
    accent: '#ffc107',
    background: '#f5f5f5',
    text: '#000',
  },
  fonts: {
    regular: {
      fontFamily: 'Roboto-Regular',
      fontWeight: 'normal',
    },
    medium: {
      fontFamily: 'Roboto-Medium',
      fontWeight: '500',
    },
    light: {
      fontFamily: 'Roboto-Light',
      fontWeight: '300',
    },
  },
};

const App = () => {
  return (
    <PaperProvider theme={theme}>
      <NavigationContainer>
        <MainNavigator />
      </NavigationContainer>
    </PaperProvider>
  );
};

export default App;

---

其他的组件库的中方式都大致一致。可以参考各自官网文档接入，操作一般都是比较傻瓜式。

作者简介

前腾讯电子签的前端负责人，现 whentimes tech CTO，专注于前端技术的大咖一枚！一路走来，从小屏到大屏，从 Web 到移动，什么前端难题都见过。热衷于用技术打磨产品，带领团队把复杂的事情做到极简，体验做到极致。喜欢探索新技术，也爱分享一些实战经验，帮助大家少走弯路！

温馨提示：可搜老码小张公号联系导师