📌  相关文章
📜  如何使用 react-native-paper 在 react-native 中创建芯片?

📅  最后修改于: 2022-05-13 01:56:16.275000             🧑  作者: Mango

如何使用 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 库在 react-native 中创建芯片。芯片用于将迷你实体显示为块状。在这个项目中,我们将创建不同的芯片,可以显示简单的文本、带有文本的图标、禁用芯片等。

下面是分步实现:

第 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 文件夹中,创建一个文件 Chip.js。

项目结构:它看起来像这样。

示例:写下相应文件中的代码。芯片在功能上类似于按钮。我们可以直接从react-native-paper库中导入Chip 。它有模式道具。要显示图标,我们可以使用icon属性。

Chip.js
import React from 'react';
import { View, StyleSheet, Alert } from 'react-native';
import { Chip } from 'react-native-paper';
  
const ChipExample = () => {
  return (
    
      
         Alert.alert('Information chip pressed')}>
          Information
        
      
      
        
          Forward{' '}
        
      
      
        
          Favourites
        
      
      
        Simple(disabled)
      
    
  );
};
  
export default ChipExample;
  
const styles = StyleSheet.create({
  chip: {
    width: 120,
    marginLeft: 20,
    marginTop: 20,
    marginBottom: 10,
  },
});


Javascript
import React from 'react';
import type { Node } from 'react';
import { View } from 'react-native';
import ChipExample from './components/chip';
  
const App: () => Node = () => {
  return (
    
      
    
  );
};
  
export default App;


文件名:App.js

Javascript

import React from 'react';
import type { Node } from 'react';
import { View } from 'react-native';
import ChipExample from './components/chip';
  
const App: () => Node = () => {
  return (
    
      
    
  );
};
  
export default App;

运行应用程序的步骤:使用以下命令运行应用程序:

npx react-native run-android

输出:

参考资料: https://callstack.github.io/react-native-paper/chip.html