React Native x Expo x TypeScript 實作計算機

讓我們來用 React Native 和 Expo，還有 TypeScript 來寫一個計算機手機 App 吧！

什麼是 React Native?

React Native 是一個用於構建移動應用程序的 JavaScript 框架。可以讓開發者使用 ReactJS 為 iOS 和 Android 平台創建手機 App。 React Native 提供了一套預構建的組件，可以用來構建應用程序的用戶界面，使得創建移動應用程序變得快速而簡單。

什麼是 Expo?

Expo 是一套用於構建和部署 React Native 應用程序的工具和服務。它為開發者提供了一個平台，可以在各種設備和平台上輕鬆設置、運行和測試他們的 React Native 應用。 Expo 還提供了一系列的 library 和 API，可用於為應用程序添加功能，如照相、推送通知等。

建立專案

首先來建立專案，如果這個專案取名為 calculator，那麼就執行以下指令：

npx create-expo-app calculator --template

20230218021734 20230218021734

因為我們要使用 TypeScript，所以我們要選擇 blank (TypeScript)。

安裝如果沒問題的話，就會顯示以下訊息：

✅ Your project is ready!

20230224005423 20230224005423

接下來就進入專案目錄後，啟動專案：

expo start

然後按下 i，就會打開 iOS 模擬器，如果要使用 Android 的話，就按下 a。

安裝樣式套件

因為我覺得 React Native 的樣式寫起來很麻煩，而且已經很習慣 TailwindCSS 了，所以我們要安裝 NativeWind 這個套件。

yarn add nativewind
yarn add --dev tailwindcss

接下來我們要建立 tailwind.config.js 這個檔案：

npx tailwindcss init

module.exports = { content: ["./App.{js,jsx,ts,tsx}", ".//**/*.{js,jsx,ts,tsx}"], theme: { extend: {}, }, plugins: [], }

並且在 babel.config.js 中加入 plugin：

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
+   plugins: ["nativewind/babel"],
  };

};

然後來測試一下是否有安裝成功

這是原本的 App.tsx:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

我們把 styles 拿掉，並改成 className：

import { StatusBar } from 'expo-status-bar' import { Text, View } from 'react-native'

export default function App() { return ( Open up App.tsx to start working on your app! ) }

然後眼尖的你可能會發現到，在 className 下會出現紅色的線。不用擔心，官網有提到如何解決這個問題，只要再新增一個 app.d.ts 檔案就可以了：

///

上面的部分是 TypeScript 才需要做的步驟，如果你是用 JavaScript 的話，就不需要做這個步驟。

接下來會分成：

建立重複使用的元件計算的邏輯撰寫整合成完整 App

建立重複使用的元件

按鈕

首先因為計算機有很多按鈕，所以我們要建立一個重複使用的元件，這樣就不用每次都要寫一個按鈕。

import { Text, TouchableOpacity, TextProps, TouchableOpacityProps, } from 'react-native' import classNames from 'classnames'

type ClickButtonProps = TouchableOpacityProps & { text: string size?: 'double' theme?: 'primary' | 'secondary' | 'accent' textProps?: TextProps }

const ClickButton = ({ onPress, text, size, theme = 'primary', textProps, ...rest }: ClickButtonProps) => {

return ( <TouchableOpacity onPress={onPress} className={classNames({ "rounded-full flex-1 items-center justify-center m-2": true, "h-[84px]": true, "w-[84px]": true, 'w-full': size === 'double', 'bg-primary-btn': theme === 'primary', 'bg-secondary-btn': theme === 'secondary', 'bg-accent-btn': theme === 'accent' })} {...rest} testID='click-button' > <Text className={classNames({ 'text-3xl font-bold text-center': true, 'text-white': theme === 'secondary' || theme === 'primary', })} {...textProps} > {text} ) }

export { ClickButton }

我們先建立一個自定義的 ClickButton 元件。

首先 ClickButtonProps 需要繼承來 React Native 的 TouchableOpacityProps，並增加一些自己的 props 型別，包括：

text：按鈕上顯示的文字。 size：按鈕的大小，為可選的 double，默認為按鈕的標準大小。 theme：按鈕的主題，為可選的 'primary'、'secondary' 或 'accent'，默認為 'primary'。 textProps：文字元件的 props，用於按鈕上文字的樣式。

這個元件使用了 React Native 提供的 TouchableOpacity 原生元件，可以把它當成 Web 中的

import { View } from 'react-native'

type RowProps = {
  children: React.ReactNode;
};

const Row = ({ children, ...rest }: RowProps) => {
  return (
    <View className='flex-row items-center gap-1' {...rest}>
      {children}
    </View>
  )
}

export { Row }