首页 > 其他分享 >Argon creative-tim UI with create-react-native-app

Argon creative-tim UI with create-react-native-app

时间:2023-03-22 14:00:37浏览次数:60  
标签:create creative react Argon navigation app native

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

标签:create,creative,react,Argon,navigation,app,native
From: https://www.cnblogs.com/chenkuang/p/17243449.html

相关文章

  • 在 React 组件中使用 JSON 数据文件,怎么去读取请求数据呢?
    要在React组件中使用JSON数据,有多种方法。常用的有以下几种方法:1、直接将JSON数据作为一个变量或常量引入组件中。importjsonDatafrom'./data.json';functio......
  • react 官网学习笔记
    1.元素(html片段)和组件的关系(js函数)2.写组件的方式(function还是class)3.一个括号和两个括号的使用场景{}(获取值/js函数调用){{}}4.props和render都是做什......
  • 【笔记】electron + react + antd
    electronElectron是一个使用JavaScript、HTML和CSS构建桌面应用程序的框架。嵌入Chromium和Node.js到二进制的Electron允许您保持一个JavaScript代码代码库......
  • 初学React useEffect Hook
    ReactHooks是从功能组件访问React的状态和生命周期方法的最佳方式。​​useEffect​​​Hook是一个在渲染之后和每次DOM更新时运行的函数(效果)。在本文中,将讨论一些......
  • react循环与条件判断
    react没有语法糖,循环和条件判断都是通过原生js来实现1.条件判断//三元表达式constgetDiv=(flag)=>{return(<div>XXX</div>{flag?<div>条件1</d......
  • react 咻咻咻
    #react必知必会1.函数式组件(简单无状态场景)/class类式组件(复杂有状态场景)2.react思想:状态驱动UI3.组件实例三大核心:refs/props/state4.class=function+hoo......
  • React 限制 Props 和 State 类型
    下面是Component的接口,P代表Props、S代表State。interfaceComponent<P={},S={},SS=any>extendsComponentLifecycle<P,S,SS>{}所以,在tsx中写两个......
  • vue/react关与key的面试题
    虚拟dom中key的作用当状态中的数据发生改变时,react会根据新数据生成新的虚拟dom,随后react进行新虚拟dom与旧虚拟dom的diff算法比较,比较规则如下:1.旧虚拟dom找到了与新......
  • 好客租房44-react组件基础综合案例-5发表评论-1
    发表评论1给按钮绑定点击事件2在事件处理程序中通过state获取评论信息3将评论信息添加到state中并调用setState()方法更新数据//导入reactimportReactfrom'react'imp......
  • 好客租房42-react组件基础综合案例-渲染列表无数据并优化
    渲染列表评论1判断列表数据的长度是否为02如果为0则渲染暂无评论//导入reactimportReactfrom'react'importReactDOMfrom'react-dom'//导入组件//约定1:类组件必......