使用 React Native Reusables 安裝 React Native Shadcn Ui

您也可以觀賞 YouTube 視訊：

使用 React Native Reusables 安裝 React Native ShadCN UI

1.讓我們先克隆 React Native Reusables 套件庫：

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

2.然後複製啟動基礎，並重新命名：

cp -R react-native-reusables/packages/templates/starter-base/ ./react-native-shadcnui

3. 安裝相依性，必要時修正套件。

cd react-native-shadcnui && yarn install && npx expo install --fix

4.在 app.json 中啟用新的 arch 支援，以避免日後的警告。

{
    "expo"：{
        "newArchEnabled": true、
        ...
    }
}

5.執行專案

yarn android

讓我們來做一個簡單的電子商務範例，看看如何使用 ShadCN UI 元件：

在你的 components 資料夾中建立 ProductItem.tsx ：

```js`......。 import { Image } from "react-native"； import Cart from "./Cart"； 匯入 { Card、 CardContent、 CardFooter、 CardHeader、 CardTitle、 } from "./ui/card"； import { Text } from "./ui/text"；

const ProductItem = () => { 返回 ( <圖片 className=「w-64 h-64 圓角」 source={require("assets/images/iphone-16-pro-max.webp")} />

    <CardTitle className="mt-8">iPhone 16 Pro Max</CardTitle>。
  </CardHeader

  <CardContent className="px-8">
    <Text className="text-sm text-gray-700 dark:text-gray-50"> 文字
      iPhone 16 Pro Max 顯示器的圓角採用美麗的弧形設計。
      美麗的弧形設計，而這些圓角位於標準的
      矩形內。
    </Text> </p
  </CardContent> (卡片內容)

  <CardFooter className="flex items-center justify-between">
    <Text className="text-black dark:text-white font-bold">$999 USD</Text>。

    <購物車 />
  </CardFooter>
</Card

); };

export default ProductItem；

編輯您的 `/app/index.tsx` 檔案：

```js
import * as React from "react"；
import { ScrollView, View } from "react-native"；
import ProductItem from "~/components/ProductItem"；

匯出預設函式 Screen() {
  return (
    <View className="flex-1 p-6 bg-secondary/30">
      <ScrollView contentContainerClassName="gap-8">
        <產品項目
        <產品項目 />
        <產品項目 />
        <產品項目 />
      </ScrollView>
    </View
  );
}

讓我們在 components 資料夾中建立一個 CartItem.tsx 元件：

import { Image, View } from "react-native"；
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"；
import { Text } from "./ui/text"；

const CartItem = () => {
  返回 (
    <Card className="p-4 flex-row">
      <CardHeader className="flex items-center justify-center">
        <圖片
          className=「w-24 h-24 圓角陰影」
          source={require("assets/images/iphone-16-pro-max.webp")}
        />

        <CardTitle className="mt-8 text-md font-bold">
          iPhone 16 Pro Max
        </CardTitle
      </CardHeader> </賀卡標題

      <CardContent className="max-w-[180px] flex justify-between">
        <View className="flex items-center justify-center mt-8">
          <Text className="text-sm text-gray-700 dark:text-gray-50">
            iPhone 16 Pro Max 顯示器的圓角採用了
            美麗的弧形設計。
          </Text
        </ 檢視

        <Text className="mt-4 text-black dark:text-white font-medium text-sm">
          $999 美元
        </正文
      </CardContent
    </Card
  );
};

export default CartItem；

在您的 components 資料夾中建立 Cart.tsx 元件：

import { ScrollView } from "react-native"；
import { Button } from "~/components/ui/button"；
匯入 {
  Dialog、
  DialogClose、
  DialogContent、
  DialogFooter、
  DialogHeader、
  對話標題
  DialogTrigger、
} from "~/components/ui/dialog"；
import { Text } from "~/components/ui/text"；
import CartItem from "./CartItem"；

const Cart = () => {
  返回 (
    <Dialog
      <DialogTrigger asChild>
        <Button variant="default" className="bg-blue-500 dark:bg-blue-600"> <Text className="text-white"> 加入購物車</Text>。
          <Text className="text-white">加入購物車</Text>。
        </Button> 按鈕
      </DialogTrigger

      <DialogContent className="sm:max-w-[425px]">說明
        <DialogHeader> <DialogTitle> <DialogTitle
          <DialogTitle>購物車 (3)</DialogTitle>
        </DialogHeader> <DialogTitle>Cart (3)</DialogTitle>

        <ScrollView className="mt-8 gap-8">
          <CartItem /> <DialogHeader
          <CartItem />
          <CartItem />
        </ScrollView>

        <DialogFooter className="mt-4">
          <DialogClose asChild> <DialogClose asChild
            <Button className="bg-blue-500 dark:bg-blue-600"> <Text className="text"> <CartItem className="text"> <DialogClose asChild
              <Text className="text-white">結帳</Text>。
            </按鈕
          </DialogClose
        </DialogFooter
      </DialogContent
    </Dialog
  );
};

export default Cart；