什么是 react-native-paper？
react-native-paper 是一个 react-native UI 库，它提供了一些常见的 UI 组件，例如按钮、文本输入框、卡片等。react-native-paper 采用 Material Design 的风格，使得应用程序可以在 Android 和 iOS 设备上拥有相似的 UI 体验。
如何安装 react-native-paper？
在项目目录下执行以下命令即可安装 react-native-paper：
npm install react-native-paper
或者使用 yarn 安装：
yarn add react-native-paper
如何使用 react-native-paper？
在 react-native 项目中使用 react-native-paper 非常简单。只需要按照以下步骤即可：
1. 导入所需组件
我们需要将我们需要使用的组件从 react-native-paper 中导入，例如：
import { Button, TextInput, Card } from 'react-native-paper';2. 使用组件
使用导入的组件非常简单，例如：
<Button mode="contained" onPress={() => console.log('Pressed')}>
Press me
</Button>上述代码会在屏幕上呈现一个带有文本“Press me”的按钮，按下该按钮时，会在控制台中输出日志。
3. 美化组件
我们可以使用 react-native-paper 中提供的两个组件来美化我们的组件，这两个组件是：
- Provider：在整个应用程序中提供 react-native-paper 的样式
- DefaultTheme：用于修改组件的默认主题样式
以下是使用这些组件的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- -- -------------- ------------ - ---- ---------------------
------ - ---- - ---- ---------------
------ - ------- ---------- ---- - ---- ---------------------
----- ----- - -
----------------
------- -
-----------------------
-------- ----------
---------- ----------
------ ----------
--
--
------ ------- -------- ----- -
------ -
-------------- --------------
----- -------- -------- -- ---
------- ---------------- ----------- -- ------------------------
----- --
---------
---------- ------------- --
------
----------- ----------- ------ -------------- --------- --
--------------
--------------- -------------------
---------------
----------- --------- ---- --------------------------- -- --
--------------
-----------------------
-------------------
---------------
-------
-------
----------------
--
-上述代码定义了一个名为 theme 的对象，其中包含了修改后的主题样式。然后，我们使用 Provider 组件将整个应用程序包装起来，并将这个主题样式传递给 Provider 组件。最后，App 组件中呈现了一些 react-native-paper 的组件，例如按钮、文本输入框和卡片。
总结
在本教程中，我们介绍了 react-native-paper 库，包括它的用途以及如何安装和使用它。我们还学习了如何使用 Provider 和 DefaultTheme 组件来修改 react-native-paper 组件的样式。希望这个教程能够让你对 react-native-paper 有一个更好的理解，并且帮助你在你的 react-native 项目中使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/the-react-native-paper