🏆

React Nativeでgluestack-uiを使ってみる

2024/03/25に公開

React Native

gluestackui

tech

📕Overview

https://gluestack.io/

React & React Native Components & Patterns
import from library & copy-paste styles all the way to victory

Production-ready components for React Native, Next.js, Expo & React.

React & React Native コンポーネントとパターン
ライブラリからインポートし、スタイルをコピー・ペーストして勝利に導く

React Native、Next.js、Expo、Reactのためのプロダクション対応コンポーネント。

テンプレートのプロジェクトを作るコマンドがあるようだ。実行してみる

npm create gluestack

ReactNativeと書いてある箇所を選択してエンターキーを押す後はずっとエンターキーを押す。

パッケージの追加もできる

npm i @gluestack-ui/themed @gluestack-style/react react-native-svg@13.4.0

プロジェクトに名前をつける

作成できました＼(^^)／

しかしこちらのテンプレートは、iOSビルドするとシュミレーターが起動しなかった....
なので、bun installしてパッケージを私は追加しました💦

おそらくlogを見ると、x-codeで、iOSの設定を17.2かな変更する必要がある気がした???
パッケージを追加して、使ったものは問題なかった?

🧷summary

The GluestackUIProvider is a component that provides aliases and tokens throughout your app, using React's Context API. It should be added to the root of your app.
You can update your App.tsx file as follows:

GluestackUIProviderは、ReactのContext APIを使ってアプリ全体にエイリアスとトークンを提供するコンポーネントです。アプリのルートに追加する必要があります。
以下のようにApp.tsxファイルを更新します：

ちょっとアレンジしてます。そのまま使うとズレるから、マージンTOPに幅をつけてます。

import { GluestackUIProvider, Text, Box } from "@gluestack-ui/themed";
import { config } from "@gluestack-ui/config"; // Optional if you want to use default theme

export default function App() {
  return (
    <GluestackUIProvider config={config}>
      <Box bg="$primary500" p="$5" mt="$24" w="$40" h="$40">
        <Text color="white">This is the Box</Text>
      </Box>
    </GluestackUIProvider>
  );
}

ChakuraUIに似たコードで書いて、プロパティも同じような書き方で、wだったらwidthで、hだったら、heightを指定することができます。

🧑‍🎓thoughts

今回は、ReactNativeで使用できるUIライブラリを使ってみました。styleSheetなるものしか試してないのと、CSSぽいものしか使ってないので、UIライブラリでかっこいいUIもまだ作れていないです。難しいですね。

UIライブラリを探すのに参考になったサイト

📕Overview

🧷summary

🧑‍🎓thoughts

Discussion