Material Design 是 Google 推出的一套现代化设计语言，其设计原则有丰富的颜色、图标、动画等元素，让应用程序看起来更加美观和人性化。在开发 React Native 应用程序中，使用 Material Design 控件可以让应用程序更加符合现代化 UI 设计的趋势。本文将详细介绍 React Native 中如何使用 Material Design 控件，包括组件的导入、属性的设置和示例代码。
组件的导入
React Native 中使用 Material Design 控件需要先安装 react-native-material-ui 组件库。该组件库是一个开源的 React 组件库，其中包含了大部分的 Material Design 控件，包括按钮、输入框、卡片等。可以通过以下命令安装该组件库：
npm install react-native-material-ui
安装完成后，需要在应用程序中导入相关组件，可以使用以下代码导入 UI 组件：
import React from 'react';
import { Text, View } from 'react-native';
import { Button, Card, CheckBox, Divider, Icon, ListItem } from 'react-native-material-ui';上面的代码将导入 Button、Card、CheckBox、Divider、Icon 和 ListItem 等组件，这些组件都是 react-native-material-ui 包中的一部分。
属性的设置
在导入组件之后，需要对组件进行属性设置，才能实现 Material Design 控件的样式和功能。以下是一些示例代码，展示了如何设置 Material Design 控件的各种属性。
Button
<Button
primary
raised
text="Primary"
onPress={() => console.log('Pressed')}
/>上述代码中，primary 和 raised 分别是 Button 组件的两个属性，表示按钮的基本颜色和样式，text 属性指定了按钮显示的文本，onPress 属性表示按钮被点击时的回调函数。
Card
-- -------------------- ---- -------
------
-----------
------------- --------- ---- --------------------------- -- ---
-------
--
-----------
------------ --------------
------------ ----------------
------------
--------------
-------
-------
------------ --
----------- -- -----------------------
--
-------
------
------------ --
----------- -- -----------------------
--
---------------
-------Card 组件包含多个子组件，如 Card.Media、Card.Body 和 Card.Actions，它们用来设置卡片的图片、标题、文本内容和按钮等。该示例代码中，Card.Media 组件使用 Image 来设置图片，并且通过 overlay 属性设置图层，Card.Body 组件展示了卡片的标题和内容，Card.Actions 组件包含了两个按钮，分别用来实现不同的功能。
CheckBox
<CheckBox
value="CheckBox"
label="Label"
checked={this.state.checked}
onCheck={() => this.setState({ checked: !this.state.checked })}
/>与普通的 HTML 中的 input 标签相似，CheckBox 组件用来展示一个复选框和相关标签。该示例代码中，value 属性表示复选框的值，label 属性表示复选框对应的标签，checked 属性表示复选框是否被选中，onCheck 属性表示复选框被选中或者取消选中时的回调函数。
Divider
<Divider />
Divider 组件用来在 Material Design 应用程序中展示分割线。
Icon
<Icon name="add" />
Icon 组件用来在 Material Design 应用程序中展示图标。该示例代码中，name 属性表示图标的名称，add 是默认存在的一个图标。
ListItem
<ListItem
divider
centerElement={{
primaryText: 'Primary Text',
secondaryText: 'Secondary Text',
}}
onPress={() => console.log('Pressed')}
/>ListItem 组件用来展示列表项，可以包含标题、文字、图标和其他相关属性。该示例代码中，divider 属性用来显示分割线，centerElement 属性用来显示列表项的内容，其中 primaryText 表示列表项的主要文本，secondaryText 表示次要文本，onPress 属性表示列表项被点击时的回调函数。
示例代码
以下是一份使用了上述 Material Design 控件的样例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------ ----------- ----------- ----- ---- - ---- ---------------
------ - ------- ----- --------- -------- ----- -------- - ---- ---------------------------
------ ------- ----- --- ------- --------- -
----- - -
-------- ------
-
-------- -
------ -
----------- -------- ----- - ---
------
-----------
------------- --------- ---- --------------------------- -- ---
-------
--
-----------
----------------------
------------------------
------------
--------------
-------
-------
------------ --
----------- -- -----------------------
--
-------
------
------------ --
----------- -- -----------------------
--
---------------
-------
----- -------- -------- -- ---
-------------- -------- ----------------
-------- --
----- ---------- --
---------
----------------
-------------
----------------------------
----------- -- --------------- -------- ------------------- ---
--
---------
-------
----------------
------------ -------- ------
-------------- ---------- ------
--
----------- -- -----------------------
--
-------
-------
------
--------------
----------- -- -----------------------
--
-------
-------------
--
-
-
----- ------ - -------------------
---------- -
----- --
---------------- -------
----------- ---------
--------------- ---------
-------- ---
--
---该样例代码包含了 Card、Divider、Icon、CheckBox、ListItem 和 Button 等多个 Material Design 控件，可以作为 React Native 开发中使用 Material Design 控件的示例。
结论
在 React Native 中使用 Material Design 控件可以让应用程序更加符合现代化 UI 设计的趋势。本文介绍了 Material Design 控件的导入方法和属性设置，包括 Button、Card、CheckBox、Divider、Icon 和 ListItem 等组件，同时提供了样例代码供读者参考。通过学习本文，相信读者已经了解了在 React Native 中使用 Material Design 控件的方法和注意事项。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f76901c5c563ced59a8f77