React Native Reusables 使用教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00550/article/details/142810576

React Native Reusables 使用教程

react-native-reusables Universal shadcn/ui for React Native: Copy, paste, and tailor components to suit your specific requirements. 项目地址: https://gitcode.com/gh_mirrors/re/react-native-reusables

1. 项目介绍

react-native-reusables 是一个为 React Native 设计的通用 UI 组件库，旨在提供一组高质量、可重用的组件，帮助开发者快速构建跨平台的移动应用。该项目基于 NativeWind v4 构建，并注重可访问性，适用于各种 React Native 项目。

主要特点：

通用性：适用于 React Native 和 React Native Web。
可访问性：所有组件都经过优化，确保良好的可访问性。
组件丰富：提供多种常用组件，如按钮、表单、导航等。
易于集成：支持通过 CLI 快速添加组件到项目中。

2. 项目快速启动

2.1 安装依赖

首先，确保你已经安装了 Node.js 和 pnpm。然后，克隆项目并安装依赖：

git clone https://github.com/mrzachnugent/react-native-reusables.git
cd react-native-reusables
pnpm install

2.2 启动项目

根据你的目标平台，选择以下命令启动项目：

iOS:
```
pnpm dev:showcase
```
Android:
```
pnpm dev:showcase:android
```
Web:
```
pnpm dev:showcase:web
```

2.3 添加组件

使用 CLI 工具添加组件到你的项目中：

pnpm add-component <component-name>

例如，添加一个按钮组件：

pnpm add-component Button

3. 应用案例和最佳实践

3.1 构建一个简单的登录页面

以下是一个使用 react-native-reusables 构建的简单登录页面的示例：

import React from 'react';
import { View, Text } from 'react-native';
import { Button, Input } from 'react-native-reusables';

const LoginPage = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>登录页面</Text>
      <Input placeholder="用户名" />
      <Input placeholder="密码" secureTextEntry />
      <Button title="登录" onPress={() => alert('登录成功')} />
    </View>
  );
};

export default LoginPage;