0.0.10 • Published 11 months ago
thingstage-react-native-components v0.0.10
RN元件庫開發
使用須知
安裝套件
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