如何使用 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 中添加分隔符。我们将在每个数组项之间添加一个分隔线，使它们看起来像是彼此分开的。 Divider 用于通过在内容之间添加细线来分隔内容。

下面是分步实现：

第 1 步：使用以下命令在 react-native 中创建一个项目：

npx react-native init DemoProject

第 2 步：使用以下命令安装 react-native paper：

npm install react-native-paper

第 3 步：使用以下命令启动服务器：

npx react-native run-android

第 4 步：现在转到您的项目并创建一个组件文件夹。在 components 文件夹中，创建一个文件 DividerExample.js。

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

示例：写下相应文件中的代码。

DividerExample.js

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Divider } from 'react-native-paper';
  
const cars = [
  'Hyundai Venue',
  'Tata Nexon',
  'Hyundai Creta',
  'Kia Carens',
  'Renault Kiger',
  'Maruti Suzuki Ertiga',
];
  
const CreateDivider = () => {
  return (
    <>
      {cars.map((item) => {
        return (
          
            {item}
            
          ;
        );
      })}
    
  );;
};
  
export default CreateDivider;
  
const styles = StyleSheet.create({
  parent: {
    margin: 15,
  },
  text: {
    fontSize: 20,
  },
});

App.js

import React from 'react';
import type {Node} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import CreateDivider from './components/DividerExample';
  
const App: () => Node = () => {
  return (
       
          
       
  );
};
  
export default App;

应用程序.js

import React from 'react';
import type {Node} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import CreateDivider from './components/DividerExample';
  
const App: () => Node = () => {
  return (
       
          
       
  );
};
  
export default App;

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

npx react-native run-android

输出：

参考： https://reactnativepaper.com/