首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

从0到1打造一款react-native App(一)环境配置

java jdk 因为是跑,所以需要依赖java,虽然现在官方语言改成Kotlin了,但是好像也不怎么关我的事。。下载最新的java即可,下载地址。...下载完毕,一路next,按照默认路径是不需要配置环境变量的。如果自定义了路径,记得去配置环境变量,网上大量教程不赘述。...Genymotion 还有最后一个东西下载,就是模拟器,下载地址,进入网站之后,首先注册一个账号,注册完毕,会自动跳转到下载界面选择第一个下载 下载完毕之后一路next安装...安装完成,会进入一个界面购买license的界面,选择最下方的个人用户,即可免费使用。进入等待几秒,会让选择所要运行的虚拟机。...完毕出现虚拟机 ok,此时准备工作都就绪了,去开始建立一个react-native项目。

1.5K40

react native 插件化

研发背景 集成react-native加载多个插件bundle包,由于公司项目业务需求,将项目进行架构分为主app和业务插件。...而与网上的搜到的情况不同,app的所有代码都是rn开发,要求插件包能够app不升级上架的情况下,能够正常的加载不同的插件业务包。这样一来,网上的拆分包打包加载无法实现项目效果。...相当于打两个不同的app资源包 主app代码进行打包与正常rn项目打包方式一致即可,因项目为rn项目,所以主app的业务代码不需要单独进行打包处理,命令行如下: ....2、插件包的加载 原生加载rn的bundle包有两种方式。...CatalystInstanceImpl类中的loadScriptFromAssets方法和loadScriptFromFile方法 image.png 加载rn资源的两种方法 一种是直接加载

1.1K10
您找到你想要的搜索结果了吗?
是的
没有找到

React Native 的未来与React Hooks

先说我对跨平台的理解: 一套逻辑可以多个平台运行,更多是避免各平台业务逻辑不统一,而对工作量的减轻是不明显!不明显!不明显的! 同时一个企业项目大了之后,一般也不会局限于一个框架之内。...事实上 Facebook 也并没有放弃 React-Native经历 《Facebook 正在重构 React Native,将重写大量底层》 的官宣之后,“四舍五入”将近一年的今天,底层重构虽然还没有正式发布...然后 React-Native 的版本升级一直是个头大的问题,我一般会先在自己的开源项目中躺坑,本次我的开源项目 GSYGithubAPP 中,是从 0.57.8 直接升级到 0.59.4 版本,...3、node_module “黑洞” : 这类问题属于看人品,比如 GSYGithubAPP 项目是从 0.57 升级到 0.59 的,而 BackAndroid 0.58 已经被完全弃用,其中项目刚好存在一个...总结 其实这也是为什么我说 React-Native 等跨平台开发,其实并没有降低工作量的原因。

3.7K30

React-Native 预加载优化方案

预加载优化方案,本文主要围绕以下几个方面展开分析: 导致React-Native端白屏时间较长的关键性因素 React-Native预加载优化方案 React-Native预加载方案实现细节...对比IOS端与Android端的首屏时间数据,我们发现端占有一定的劣势,我们启动React-Native应用时,会发现第一次启动React-Native页面会有一个短暂的白屏过程,而且完全退出再进入...综上可知,导致React-Native端白屏时间较长的关键性因素是bundle离线包加载与解析的时间较长,因为React-Native端bundle离线包加载与解析的过程是java端完成的,而...React-Native预加载优化方案 为了优化React-Native端线上业务的用户体验,我们提出了React-NativeBundle预加载优化方案 首先展示的是React-Native...操作中,我们通过ReactInfo缓存把view缓存在本地的ArrayMap 同时为了优化React-Native线上项目内存方面的占用率,ReactActivity销毁,我们需要使用onDestroy

5.6K11

React-Native 通用化建设与性能优化

以下为已实现的react-native bundle本地分包方案的主要思路: 用户访问react-native view时,客户端检索到离线包中的业务包bundle文件以后与基础包文件进行简单的合并...图片预加载,客户端提前加载cgi的预加载优化 针对端提出的react-native上下文预加载优化 接下来具体介绍针对端提出的react-native上下文预加载优化 使用React...Native开发混合应用的过程中,我们第一次进入页面(React Activity)会有一个短暂的白屏过程(真机上近 1秒,模拟器上比较快, 200毫秒左右),而且完全退出再进入,仍然会有这个白屏...端打点可以发现在ReactActivity的onCreate方法中,耗时最多的是 createRootView()和startReactApplication()这两个操作 对于白屏的问题我们的优化方案是...:提前创建ReactRootView进行render,runApplication之后直接将创建好的rootView挂载React-Native view上去 这里是react-native源码时序图

4.9K00

VS Code开发React-Native及Flutter 开启无线局域网真机调试问题

笔者前段时间在做react-native开发,一直是有线连接真机进行调试的。...参考文章:vscode通过wifi调试真机的Flutter应用 Vscode插件地址:ADB Interface for VSCode 下面先介绍flutter如何开启无线调试: 因为开发react-native...React-Native 无线调试教程: 首先基本步骤跟flutter一样,无线连接成功拔掉数据线,运行 yarn run android(react-native run-android)= 具体看...yarn start(或者react-native start)默认端口是8081,如果端口被占用可以命令加入 –port=指定的端口号 如react-native start --port=7999...总结 到此这篇关于VS Code开发React-Native及Flutter 开启无线局域网真机调试问题的文章就介绍到这了,更多相关VS Code React-Native Flutter 无线局域网内容请搜索

2.4K30

30岁程序媛一家公司工作八年,告别“体制化”终于跳槽,别再妄想靠公司养老了

下面是面试中的一些考察技术点: Android知识点 基础: 四大组件、fragment、自定义View、事件分发、滑动处理、handler、AsyncTask、IntentService、ThreadHandler...很多时间,我之前的公司,我感觉我更多地被“体制化”了,如《肖申克救赎》里的那个老图书管理员一样。每天做着同样的事,写着同样的代码,复制粘贴就够了。我所用到的知识,工作一年的时间,都学会了!...因为做的代码修改量很小,常年发展只能在这家公司做类似的工作,如果跳槽到外面很难很难再找到合适的工作。 虽然工资每年都上涨了一点,但是和外面跳槽翻倍的那种差距就太大了,特别是10年的差距......所以公司职务、薪资各方面都还不错。 能到这个层级,工作、生活也都相对比体面,基本上不会想着去外面折腾了,公司的工作也都是以稳定为主。 程序员C的生活,估计也会被大多数程序员所羡慕着......所以一家公司呆了10年的程序员,大概率会分为这3类: 1、工作稳稳当当,不求上就不求过错,平稳就好。 2、工作能力下降,工作如履薄冰,有可能会在公司不稳定的时候被裁员。

64820

React-day6

我们在网页中使用的一些 元素,div, p, img 都不能用了,只能使用RN固有的组件; 最终,开发出来的项目,是要运行到手机上的,那么,如何把一个 RN 的项目,完整的发布到手机上去运行呢,这里,需要结合 的...搭建基本的开发环境 - 英文官网 搭建基本的开发环境 - 中文 这两篇文档对比着进行参考,进行相关的安装; 手机的相关配置 使用数据线,把手机链接到电脑上; 运行 adb devices 的命令,这个命令,是开发环境提供的...; 需要先开启手机的开发者模式 如果开启开发者模式之后,还是看不到设备,则尝试安装 豌豆荚 这样的工具,让这些工具帮助你电脑上安装手机的驱动; 搭建RN的项目 运行react-native init...keyAlias MYAPP_RELEASE_KEY_ALIAS + keyPassword MYAPP_RELEASE_KEY_PASSWORD + } +} buildTypes.../gradlew assembleRelease开始发布APK的Release版; 当发行完毕,进入自己项目的android\app\build\outputs\apk目录中,找到app-release.apk

1.4K10

react-navigation,刷新你的导航一、属性介绍二、案例

当然只有5.0以上才有效果 gesturesEnabled:是否支持滑动返回手势。...iOS默认支持,默认关闭 screen:对应界面名称,需要填入import之后的页面 mode:定义跳转风格 card:使用iOS和默认的风格。...iOS默认底部,默认顶部 swipeEnabled:是否允许标签之间进行滑动 animationEnabled:是否更改标签时显示动画 lazy:是否app打开的时候将底部的标签栏全部加载...:设置不活跃状态下,label和icon的背景色 showLabel:是否显示label,默认卡其style:tabbar的样式 labelStyle:label的样式 属性 activeTintColor...传递参数 ChatScreen页面中,如果直接写死标题则不利于代码的可维护性。所以我们可以导航的时候传递参数。首先编辑一下HomeScreen组件,传递自定义的属性user参数到路由中去。

19.6K90

React-day1

移动App第1天 什么是混合移动App开发【重点】 苹果上的软件是如何开发出来的:使用的是 OC、或者使用Swift这门语言 平台上的软件又是如何开发出来的:使用相关的语言开发的,Java,的控件进行开发...苹果和平台上共有的软件是如何开发出来的:腾讯招两套开发人员【开发组】,手机京东 前端移动 App(Application)开发技术,去开发手机端的应用程序; 前端的混合移动App开发技术,并没有使用...苹果 或 官方推荐的 开发平台和开发方式,而是抛弃了 官方提供的方式,使用 前端的独有的技术进行移动App开发体验; 什么是移动App开发:通俗的理解,就是把开发Web网站的技术(HTML+CSS...配置环境 安装installer_r24.3.4-windows.exe,最好手动选择安装到C盘下的android目录 打开安装的目录,将android-25、android-23(react-native...创建React-Native项目 运行cd AwesomeProject切换到项目根目录中,运行adb devices来确保有设备连接到了电脑上 运行react-native run-android打包编译项目

2.2K20

ReactNative开发环境的搭建与开发前准备

ReactNative开发环境的搭建与开发前准备 一、准备工作     ReactNative中文网上有详细的开发文档与教程,首先,想要系统了解ReactNative的朋友可以如下网站中获取详细信息...ReactNative环境之前,开发者需要先安装一些小工具,首先需要Homebrew工具,Homebrew工具是Mac系统的包管理器,终端运行如下命令进行安装: /usr/bin/ruby...命令成功执行,进入到项目根目录中,如下: 使用react-native run-ios或者react-native run-android来进行iOS项目或者Android项目的运行,如果你看到如下图所示的界面...,恭喜你,你的ReactNative项目已经可以跑起来了(需要注意:运行项目的时候,模拟器必须先启动): 需要注意,运行iOS项目时,会默认启动Xcode的默认模拟器,如果要启动特定的模拟器...模拟器中使用command+R来进行界面的刷新,效果如下: 模拟器中双击R键来进行界面的刷新。

2K20

【Hybrid开发高级系列】ReactNative(三)——RN能力简介

RN能力简介 1.1 原生组件引用         使用React Native,你可以使用标准的平台组件,例如iOS的UITabBar或的Drawer。...这意味着你可以主线程解码图片,然后在后台将它保存到磁盘,或者不阻塞UI的情况下计算文字大小和界面布局等等。所以React Native开发的app天然具备流畅和反应灵敏的优势。...如此一来,npm上的许多库就可以React Native中直接使用。...尽管如此,使用自定义的原生视图和模块来扩展ReactNative也非常容易 —— 这意味着你现有的所有工作都可以被复用,你喜欢的各种原生库都可以被导入。...创建一个基础的模块,需要先创建一个继承自ReactContentBaseJavaModule的类,然后使用@ReactMethod标注(Annotation)来标记那些你希望通过Javascript

22730

React Native学习之Android的返回键BackAndroid详解

前言 最近在学习使用 React Native开发,iOS搞完,开始适配,由于木有接触过,所以碰到了很多问题,第一个问题,的返回键BackAndroid问题, 我写了一个工具类,来搞定,其中用到了...java原生代码与js交互;好吧,下面开始正式内容: 上代码: // BackAndroidTool // 功能: "手机上的返回键" // Created by 小广 on 2016-05-10...strict'; import React,{ Platform, Navigator, BackAndroid, ToastAndroid, NativeModules, } from 'react-native...reactContext); } @Override public String getName() { return "RCTCommonTools"; } /** * 此方法是为了解决返回键退出程序,...); getCurrentActivity().startActivity(setIntent); } } 总结 以上就是这篇文章的全部内容了,本文还有许多不足,希望本文的内容对大家的学习或者工作具有一定的参考学习价值

1.3K20

ReactNative 原生混合开发打包ipa和apk

本文章默认会iOS 和常规打包,只介绍打包RN这步。...过程总览 ---- 将开发JS部分打成离线Bundle供原生调用 iOS 更改入口路径(则配置即可) 具体见下面iOS和分别打包详细过程。...iOS打包ipa过程 ---- 1、在你的RN项目里新建一个输出文件夹,如下图名称可以自定义。 !...执行完之后release_ios文件夹下面你可以看到: ? 然后将这两个文件拉到工程。 3.调整入口,然后按照iOS正常打包流程打包即可。...正常步骤打包即可}修改完成之后,运行验证下,然后按照iOS正常步骤打包即可 注意:用真机测试离线包{\color{red}注意:用真机测试离线包}注意:用真机测试离线包 Android Q打包apk过程 ---- 打包比

1K20
领券