网站怎样免费推广,每天新闻早知道,网站建设截图,微信网站怎样做学习一次#xff0c;随处书写。(以下文字来自各大网上资料整理而来#xff0c;侵删#xff01;)概述使用React为Android和iOS创建本机应用React Native将本机开发的最佳部分与React(用于构建用户界面的一流JavaScript库)结合在一起。 少用或多用。您现在可以在现有的Android…学习一次随处书写。(以下文字来自各大网上资料整理而来侵删)概述使用React为Android和iOS创建本机应用React Native将本机开发的最佳部分与React(用于构建用户界面的一流JavaScript库)结合在一起。 少用或多用。您现在可以在现有的Android和iOS项目中使用React Native也可以从头开始创建一个全新的应用程序。用JavaScript编写-使用本机代码呈现React原语渲染到本机平台UI这意味着您的应用程序使用与其他应用程序相同的本机平台API。 许多平台一个React。创建特定于平台的组件版本以便单个代码库可以跨平台共享代码。使用React Native一个团队可以维护两个平台并共享一种通用技术-React。面向所有人的原生开发React Native可让您创建真正的本机应用程序而不会影响用户的体验。它提供了一套核心的像与平台无关本地组件的ViewText和Image直接映射到该平台的原生UI积木。无缝跨平台React组件包装了现有的本机代码并通过React的声明性UI范例和JavaScript与本机API进行交互。这样就可以为全新的开发人员团队进行本机应用程序开发并且可以让现有的本机团队更快地工作。快速刷新保存后立即查看更改。借助JavaScript的强大功能React Native可让您以闪电般的速度进行迭代。无需等待本地构建完成。保存查看重复。会谈React Native团队的成员经常在各种会议上发表演讲。您可以在Twitter上关注React Native团队的最新消息Facebook支持社区驱动Facebook在2015年发布了React Native并一直保持至今。 在2018年React Native 在GitHub中任何存储库的贡献者数量中排名第二。今天React Native得到了来自世界各地的个人和公司的支持包括CallstackExpoInfinite RedMicrosoft和Software Mansion。 我们的社区一直在运送令人兴奋的新项目并通过诸如React Native Windows和React Native Web之类的仓库来探索Android和iOS以外的平台。谁在使用React Native从成熟的《财富》 500强公司到热门的新兴创业公司成千上万的应用程序都在使用React Native。如果您好奇使用React Native可以完成什么请查看这些React Native官方展示柜与Flutter优缺对比优势热重装快速编码。本质上与Flutter具有相同的功能。 热重载允许开发人员将新代码直接注入正在运行的应用程序中从而加快了开发过程。因此开发人员可以立即看到更改而无需重建应用程序。 热重载还保留了应用程序的状态避免了在完全重载期间丢失它的风险(在基于状态的框架中这是一项关键优势)从而进一步加快了应用程序的开发速度。一个代码库两个移动平台(以及更多)。与Flutter完全相同编写单个代码库为2个应用程序提供动力-涵盖Android和iOS平台。 更妙的是JavaScript通过与Web应用程序共享代码在编写跨平台应用程序时为您提供了帮助。这是通过创建可编译为目标平台的抽象组件来完成的。它使用一种流行的语言-JavaScript。React Native使用JavaScript许多开发人员都熟悉的一种编程语言(尽管Dart仍然不那么广为人知或使用)。而且如果您是喜欢静态类型编程语言的开发人员则甚至可以使用TypeScript(JavaScript子集)。开发者的选择自由React Native使开发人员可以构建跨平台应用程序不多不少 优点是React Native 允许开发人员精确地决定他们要使用什么解决方案。两者都根据项目的要求以及开发人员的喜好而定。 假设如果开发人员需要决定如何处理全局状态(如何存储和管理应用程序中许多组件中使用的数据)选择路由器库或在JavaScript和TypeScript之间进行选择–他们可以决定是否d倾向于使用自定义的UI库或者自己编写。相对成熟度。官方的React Native版本是4年前发布的因此Facebook团队有足够的时间来稳定API并专注于解决问题和解决问题。现在他们正在努力进行一些令人兴奋的改进-例如减小应用程序的大小。活跃而广阔的社区。React Native有庞大的开发者社区。不仅如此还有无数的教程库和UI框架使学习该技术变得容易并且可以快速轻松地进行开发。对React开发人员易于学习我们列表中的这一优势非常针对React开发人员。如果您具有Web开发的背景并且已经使用了流行的React解决方案则可以轻松地使用React Native而无需学习新的库。您可以使用相同的库工具和模式。最多减少50的测试。我们可以减少大约50的自动化测试因为我们可以创建相同的测试以在两个平台上运行从而减少了对质量检查团队的需求。它看起来与Flutter应用程序开发中的相同-我们在此处进行了描述。缺点它不是真正的本地人。像任何跨平台解决方案一样UI体验和性能都不会与本机应用程序中的完全相同而是与之接近。但是与Flutter相比使用React Native更容易获得“自然感觉”。如果您希望Flutter应用程序具有本机组件则需要进行其他工作。开箱即用的零件少。React Native仅支持开箱即用的基本组件(其中许多组件适用于开箱即用的平台例如按钮加载指示器或滑块)。 就像我们在本段中所说的那样外部存储库中有许多其他的React Native组件。开发人员可以在项目中使用它们但这需要额外的精力和时间。 另一方面Flutter旨在支持开箱即用的Material Design因此该框架支持更多的小部件。节省时间。使用Flutter的开发人员可以使用易于定制且跨平台一致的预制窗口小部件来创建大多数视图。开发者的选择自由。开发人员创建新项目后他们需要确定要使用哪个导航包以及哪个全局状态管理。了解每个解决方案的细微差别最终决定要用于项目的最佳解决方案可能需要花费大量时间。很多废弃的包裹。React Native拥有大量的库。不幸的是它们太多是低质量的。或完全被遗弃。 Dan Abramov建议检查存储库中的问题数量和提交频率以防止使用废弃的程序包。 在他关于“您对React Native有什么不满意”的讨论摘要中阅读有关React Native当前形状的问题和局限性的更多信息。脆弱的用户界面。React Native在后台使用本机组件这一事实应该使您充满信心每次OS UI更新后您的应用程序组件也将立即升级。 就是说– 这可能会破坏应用程序的用户界面但这种情况很少发生。 更糟糕的是如果更新导致本机组件API发生某些更改更新将变得更加危险。好消息这种事件很少发生。而就Flutter而言(由于框架自行重新创建本机组件的方式)应用程序UI更加稳定。应用比本地应用更大。用React Native编写的应用程序必须能够运行Javascript代码(JavaScript虚拟机)。Android默认情况下不具有此功能-意味着应用程序需要包括一个支持JavaScript代码的库从而导致应用程序比其本机Android同类产品更大。 使用React Native制作的iOS应用程序不会出现此问题但它们通常仍比本地应用程序大。好消息如前所述React Native团队正在努力减少其应用程序的大小,小型轻巧的JavaScript引擎。RN环境配置Option:Expo CLI快速入门假设您已安装Node 10 LTS或更高版本则可以使用npm安装Expo CLI命令行实用程序npm install -g expo-cli然后运行以下命令来创建一个名为“ AwesomeProject”的新React Native项目如果卡住了,则可能墙的原因或者网速问题expo init AwesomeProject # 创建项目cd AwesomeProjectnpm start || expo start # 运行项目运行您的React Native应用程序 在iOS或Android手机上安装Expo客户端应用程序然后连接到与计算机相同的无线网络。在Android上使用Expo应用程序从终端扫描QR码以打开您的项目。在iOS上按照屏幕上的说明获取链接。Option:React Native CLI快速入门安装NodePython2JDK(window)。我们建议通过Chocolatey(适用于Windows的流行软件包管理器)安装Node和Python2 。React Native还需要Java SE Development Kit(JDK)和Python 2 的最新版本。两者都可以使用Chocolatey安装。打开管理员命令提示符(右键单击命令提示符然后选择“以管理员身份运行”)然后运行以下命令choco install -y nodejs.install python2 jdk8.如果您已经在系统上安装了Node请确保它是Node 8.3或更高版本。如果您的系统上已经有JDK请确保它是版本8或更高版本。您可以在Node的Downloads页面上找到其他安装选项。安装React Native CLI。Node随附npm可让您安装React Native命令行界面。 在命令提示符或外壳程序中运行以下命令npm install -g react-native-cliAndroid开发环境如果您不熟悉Android开发则设置开发环境可能会有些乏味。如果您已经熟悉Android开发则可能需要配置一些内容。无论哪种情况请确保仔细遵循以下几个步骤。1.安装Android Studio 下载并安装Android Studio。当提示您选择安装类型时请选择“自定义”设置。确保选中以下所有框旁边的框Android SDKAndroid SDK PlatformPerformance (Intel ® HAXM)(有关AMD请参见此处)Android Virtual Device然后单击“下一步”以安装所有这些组件。设置完成后将显示“欢迎”屏幕请继续执行下一步。2.安装Android SDK。Android Studio默认情况下会安装最新的Android SDK。但是使用本机代码构建React Native应用程序Android 9 (Pie)特别需要SDK。3.配置ANDROID_HOME环境变量。React Native工具需要设置一些环境变量以便使用本机代码构建应用程序。 4.将平台工具添加到Path。在Windows控制面板中的“ 系统和安全性”下打开“系统”窗格然后单击“ 更改设置...”。打开“ 高级”选项卡然后单击“ 环境变量...”。选择路径变量然后单击编辑。单击“ 新建”然后将“平台工具”的路径添加到列表中。RN 基本命令行操作# 执行cli命令最好在管理员模式下运行不然会引发其它错误设置为admin权限后如果还报错可重启电脑再尝试下react-native init NameProject # 创建RN项目react-native init NameProject --version X.XX.X # 使用特定版本react-native init NameProject --template typescript # 创建RN TS项目expo init NameProject # 也可以用exporeact-native run-android # 开发环境下运行RN项目(android)react-native run-android --variantrelease # 测试应用的发布版本,设置签名后此选项才可用reqact-native link xxx # 将第三方库与原生进行关联如果发生错误使用gradlew clean清理下adb shell input keyevent 82 # 利用adb工具命令式打开控制台选项adb reverse tcp:8081 tcp:8081 # 命令提示符下然后重新运行项目adb kill-server # 关闭adb服务adb root # 重新启动root权限的adb服务rm -f r $TMPDIR/react-* #重置打包程序缓存watchman watch-del-all # 清除守望者手表gradlew clean # 清理构建android文件gradlew bundleRelease # 生成(Google Play)APK,会将运行您的应用程序所需的所有JavaScript捆绑到AABgradlew assembleDebug # 编译并打Debug包gradlew assembleRelease # 编译并打Release的包npm cache clean --force # npm清除包缓存yarn cache clean # yarn清除包缓存# 环境遇到的问题# bug描述Starting a Gradle Daemon, 1 busy and 6 stopped Daemons could not be reused, use --status for details# 解决思路停止运行Daemon进程gradle --stop # Gradle会杀死任何闲置了3个小时或更长时间的守护程序因此您不必担心手动清理它们。gradle --status # 停止守护程序后可查看下状态创建typescript项目 的时候可能会报错具体详情可点击此处查看即可。上面出现的程序名gradlew需要特别说明下说起gradlew就要聊聊gradle.介绍简单来说就是gradle会快速迭代版本如果合作开发项目会导致成员自己下载gradle导致版本不一从而手忙脚乱所以干脆包装起来统一。因为gradle处于快速迭代阶段经常发布新版本如果我们的项目直接去引用那么更改版本等会变得无比麻烦。而且每个项目又有可能用不一样的gradle版本这样去手动配置每一个项目对应的gradle版本就会变得麻烦所以需要包装引入gradle-wrapper通过读取配置文件中gradle的版本为每个项目自动的下载和配置gradle就是这么简单。我们便不用关心如何去下载gradle,如何去配置进项目来。下面一张图对gradle与RN的关系。通过gradle wrapper命令就可以愉快的gradlew了。RN项目基本所需库react-navigation React Navigation 源于 React Native 社区对一个可扩展且易于使用的导航/路由系统解决方案的需求它完全使用 JavaScript 编写。redux 全局状态管理器解决组件数据通信问题。react-native-vector-icons icon图标容器该库自带字体图标也可自定义图标文件。fetch 与后端通信ajax在这里推荐最新版的apifetch。react-native-community/async-storage 本地存储默认是不会带的需要用该库进行操作该语法糖与web的localstorage并无差别。react-devtools 对react-native界面的dom进行调试。react-native-debugger 对react-native程序的桌面调试工具。react-native-config 解决不同环境(开发、测试、正式)变量配置。关于react-native我认为最好的环境配置详情可参考taro的taro react-native更详细更全面。
