ＲＮ元件庫開發

使用須知

安裝套件

npm install thingstage-react-native-components

須將套件納入 tailwind 編譯範圍內才能使樣式運作

// tailwind.config.js

module.exports = {
  content: [
    // ...
    './node_modules/thingstage-react-native-components/src/**/*.{js,jsx,ts,tsx}', // 增加套件
  ],
  //...
};

將 KitchenSinkProvider 加到專案根節點

import React from 'react';
import App from '.src/App';
import KitchenSinkProvider from 'thingstage-react-native-components/src/KitchenSinkProvider';

const Entrypoint: React.FC = () => {
  return (
    <KitchenSinkProvider>
      <App />
    </KitchenSinkProvider>
  );
};

export default Entrypoint;

開發須知

基於 Nativewind 的運作原理，如果是自定義元件，需要自帶 style 參數並使用才能使 className 運作。

Ref: https://www.nativewind.dev/guides/custom-components

Storybook

進入 storybook 目錄進行安裝

cd storybook

yarn
#or
npm install

安裝故障排除

安裝前會自動將根目錄的套件打包並使用該打包好的套件安裝

如果有更新套件，視情況可能需要清除套件工具的暫存才有辦法正確更新套件

yarn cache clean thingstage-react-native-components

#or

npm cache clean thingstage-react-native-components

甚至可能發生 lock 衝突，或許需要清除 storybook 的 lock 後再安裝

rm -rf yarn.lock
#or
rm -rf package-lock.json

運行 Storybook

在 storybook 目錄下開起 bundle server

yarn start

執行 Android

yarn android

執行 iOS

yarn ios