科技美学

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

React Native Elements开发环境 & 生成项目 & 虚拟机调试 & 本地生成APK档 & 虚拟机运行APK档

1.0 Argon creative-tim UI

https://demos.creative-tim.com/argon-pro-react-native/?_ga=2.80237713.765019692.1678943367-1993314682.1676962947

https://github.com/creativetimofficial/argon-react-native

 

creative-tim團隊參考了ignite的架構。

文件夾 描述
./assets 資源
./components react控件
./constants config
./navigation react第三方庫
./screens 項目頁面
文件 描述
babel.config.js 如用渲染器template,需設置
App.js 項目入口

2.0 create-react-native-app

 

npx create-react-native-app reactnative006

  創建reactnative project

npm i @react-native-masked-view/masked-view @react-navigation/bottom-tabs @react-navigation/compat @react-navigation/drawer @react-navigation/native @react-navigation/stack @use-expo/font expo-app-loading expo-asset expo-font expo-modules-core galio-framework prop-types react-native-eject react-native-gesture-handler git+https://github.com/siemiatj/react-native-modal-dropdown.git react-native-reanimated react-native-safe-area-context react-native-screens react-native-vector-icons

  安裝creative-tim Argon UI 依賴庫。

Copy Argon項目到 新建項目。

PS: 因Argon是使用較舊的庫,所以要自己合併Argon到較新的create-react-native-app。

3.0 Simulator

adb devices -l
npm run android

  運行模疑器。

 

缺點:

Argon項目本身的structure較亂,而create-react-native-app是沒架構的腳手架。所以,應把Argon遷移到ignite boilerplate。

posted on 2023-03-22 13:53  chankuang  阅读(24)  评论(0编辑  收藏  举报