如何使用 react-native-paper 库在 react-native 中创建按钮?
React-native 是 Facebook 开发的一个框架,用于在一种通用语言 JavaScript 下为 iOS 和 Android 创建原生风格的应用程序。最初,Facebook 只开发了 React Native 来支持 iOS。但是,由于最近支持 Android 操作系统,该库现在可以为这两个平台呈现移动 UI。
先决条件:
- reactjs的基础知识。
- 具有 ES6 语法的 Html、css 和 javascript。
- NodeJs 应该安装在您的系统中(安装)。
- Jdk 和 android studio 用于在模拟器上测试您的应用程序(安装)。
方法:在本文中,我们将使用react-native-paper库创建不同类型的按钮。我们已经从库中导入了按钮组件并在您的应用程序中使用了它。我们将逐步了解该方法。
下面是分步实现:
第 1 步:使用以下命令创建一个 react-native 项目:
npx react-native init DemoProject
第 2 步:使用以下命令安装 react-native paper:
npm install react-native-paper
第 3 步:使用以下命令启动服务器:
npx react-native run-android
第 4 步:安装图标和深度链接的依赖项:
npm i react-native-vector-icons
react-native link react-native-vector-icons
第 5 步:现在转到您的项目并创建一个组件文件夹。在 components 文件夹中,创建一个文件 ButtonExample.js。
项目结构:它看起来像这样。
实现:在各自的文件中写下代码。
ButtonExample.js
import React from 'react';
import { View, StyleSheet, Alert } from 'react-native';
import { Button } from 'react-native-paper';
const AddButton = () => {
return (
);
};
const styles = StyleSheet.create({
button: {
margin: 20,
},
});
export default AddButton;
App.js
import React from 'react';
import type { Node } from 'react';
import { View } from 'react-native';
import AddButton from './components/ButtonExample';
const App: () => Node = () => {
return (
);
};
export default App;
应用程序.js
import React from 'react';
import type { Node } from 'react';
import { View } from 'react-native';
import AddButton from './components/ButtonExample';
const App: () => Node = () => {
return (
);
};
export default App;
运行应用程序的步骤:使用以下命令运行应用程序:
npx react-native run-android
输出:我们 将看到我们可以使用 react-native-paper 创建的不同按钮样式。
参考: https://callstack.github.io/react-native-paper/button.html