GoogleAPI与React Native / Expo的集成 - 腾讯云开发者社区

文章/答案/技术大牛

发布

React Native Expo急速教程 7 - AsyncStorage

翻译：reactnative.dev/docs/asyncs… 刘传君 AsyncStorage是一个未加密的、异步的、持久的、键值存储系统，它是全局的。应该使用它来代替LocalStorage。...在iOS上，AsyncStorage由原生代码支持，它将小的值存储在序列化的字典中，大的值存储在单独的文件中。...在Android上，AsyncStorage将根据可用的情况使用RocksDB或SQLite。...AsyncStorage JavaScript代码是一个门面，它提供了一个清晰的JavaScript API、真实的Error对象和非多函数。API中的每个方法都会返回一个Promise对象。...import { AsyncStorage } from 'react-native'; 持久化数据： _storeData = async () => { try { await AsyncStorage.setItem

6261 0

使用Expo开发React-native程序（一）

开发React-native程序，除了官方提供的React-native CLI外，目前还有一个新的选择Expo。Expo通过编写React和js代码，来生成IOS app、安卓app和web端应用。...它主要包括两个工具：Expo CLI：命令行工具，用来创建脚手架、运行、build程序。Expo Go：安装在真机或虚拟机上的app，可以直接运行你构建出来的项目（不需要签名），方便debug和测试。...如何使用：1.全局安装Expo CLI工具npm install -g expo-cli2.创建项目（假设项目名称为expo-1）expo init expo-1或者npx create-expo-app...expo-13.安装其他依赖项如果是苹果M1、M2芯片，需安装watchmanbrew install watchman4.启动npm start启动完成后，可以在web端查看效果：http://localhost...:8081/也可以按 i 启动IOS虚拟机（前提是你已经安装了xcode和IOS虚拟机），启动IOS虚拟机后expo会首先给你安装Expo Go，如下图所示：安装好后就可以正式进入app了，效果如下：expo

3.6K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

用expo，从0到1 轻松学react native

由于最近又要开始react native的开发，所以重新翻了下官方文档，发现rn已经迭代到46版本了，安装最新的版本，还需要额外的第三方编译库，还用上了yarn。...有没有一种办法可以躲过这些繁琐的入门障碍呢？有的！需要借助两个工具： 1. create-react-native-app 2....一、手机安装Expo 二、电脑安装 create-nreact-native-app 终端控制台： $ npm install -g create-react-native-app 三、初始化一个rn项目...接下来使用 Expo 扫描这个二维码就可以打开你编写的 RN 应用了。并且只要在 Expo 中打开过一次，就会在 App 中保留一个入口。 Expo相当于一个壳，你只需关注js层面的开发即可。...我体验了下，很简单，就3步，即可开始react native跨平台移动端开发！

4.9K6 0

iOS React Native 混合开发集成React Native

序：有时候我们并不是需要全部使用React Native,我们想和原生混合开发，那我们应该怎么办呢。先看一下我集成完之后的项目目录： ?...首先安装React Native node组件 1、新建一个文件夹如目录中的RN，这个文件夹用于存放React Native相关内容 2、新建一个package.json用于安装...4、在新建的目录下新建index.ios.js,把之前React Native的例子拷过来就可以，记得改下modules的名字 /** * Sample React Native App * https.../RN/node_modules/react-native/ReactCommon/yoga' pod 'React', :path => ‘....4、启动RN cd 到你上面新建的文件夹里，如我项目中的RN文件夹，然后执行react-native start ?

3K2 0

在expo下使用react-native-fast-image组件报错问题

在expo下使用react-native-fast-image组件 import FastImage from 'react-native-fast-image' const Imagegallery...FastImage.resizeMode.contain} /> ) 在IOS下运行会报错：requireNativeComponent: "FastImageView" was not found in the UIManager in react...native 报错的原因是react-native-fast-image组件依赖的原生组件并没有包含在react-native里，使用前需要进行预构建。...解决方案：执行下面的命令，预构建ios pod原生代码： npx expo prebuild -p ios --clean 也可以不用后面的参数，直接prebuild，将安卓的原生代码库也一起安装上...npx expo prebuild 然后启动expo代码 npx expo run:ios 经过漫长的等待，应该就能正常运行了。

1.1K0 0

React Native集成极光推送

推送作为手机应用的基本功能，是手机应用的重要部分，如果自己实现一套推送系统费时费力，所以大部分的应用都会选择使用第三方的推送服务，如极光推送。...下面就以React Native项目集成jpush-react-native 来讲讲如何集成极光的推送服务。...集成推送安装JPush库由于极光开发者服务 SDK 采用了模块化的使用模式，即一个核心（JCore）+N种服务（JPush，JAnalytics，…）的使用方式，所以把公共核心代码分离出来，这样在使用极光推送多种服务的时候不会出现冲突...打开终端，进入项目文件夹，执行以下命令（获取直接在WebStrom的Terminal这输入命名）。...npm install jpush-react-native --save npm install jcor

9013 0

React Native 集成 ArcGIS 地图

ArcGIS官方提供了 JavaScript SDK，也提供了 ArcGIS-Runtime-SDK-iOS，但是并没有提供 React Native的版本，所以这里使用了 react-native-arcgis-mapview...库，这个库比较老，支持的 ArcGIS-Runtime-SDK-iOS 版本是100.4，但是在使用的时候发现，在使用pod install安装的时候总是会下载失败，所以后面手动将 ArcGIS-Runtime-SDK-iOS...的版本改为 100.14.1。...安装react-native-arcgis-mapview 使用 npm 安装 react-native-arcgis-mapview 库 cd MyReactNativeApp npm install.../node_modules/react-native-arcgis-mapview/ios" 编辑 node_modules/react-native-arcgis-mapview/ios/RNArcGISMapView.podspec

4101 0

原生 Android 集成 React Native

---- 使用 React Native 从零开始开发一款移动应用是一件很惬意的事情，但对于一些已经上线的产品，完全摒弃原有应用的历史沉淀，全面转向 React Native 是不现实的。...因此，使用React Native去统一原生Android、iOS应用的技术栈，把它作为已有原生应用的扩展模块，是目前混合开发的最有效方式。...接下来，使用如下命令添加React和React Native运行环境的支持脚本。...yarn add react react-native 执行完命令后，会发现Android项目的根目录下多了一个node_modules文件夹，里面包含了React Native开发也运行所需的依赖模块...如果不指定依赖的版本，那么默认使用的是package.json文件中React Native对应的版本。

1.9K2 0

React-Native私服热更新的集成与使用

集成热更新 3.1 大致流程与所需工具流程图：由于我是在开发一个实验性项目，所以工程化不完善，借用的网友公司的热更新大致流程，如有不妥，麻烦评论一下，我删除~ 环境 React-Native：...'0.64.2' 工具： react-native-cli：react-native命令行工具，安装后可以在终端使用 react-native 命令。...code-push-cli ：连接微软云端，管理发布更新版本的命令行工具，安装后可以在终端使用 code-push 命令 react-native-code-push 集成到react-native项目...与所有其他 React Native 插件一样，iOS 和 Android 的集成体验不同，因此请根据您的目标平台执行以下设置步骤。...3.5.3 API — 检查更新 react-native-code-push 由两部分组成： JavaScript 模块，可以 import/require，并允许应用程序在运行时与服务交互（例如检查更新

9.7K1 0

react-native 热更新react-native-pushy集成遇到的问题

主要步骤按官方文档实现，这里只记录遇到的一些小坑官方文档 run-android时NDK报错前提是NDK已安装并且环境变量已设置根据报错提示在android/local.properties文件里加入...ndk.dir=~/Library/Android/android-ndk-r10e //这里改成你自己的ndk路径 cxxbridge找不到在node_modules/react-native-update.../android/src/main/java/cn/reactnative/modules/update/UpdateModule.java里： import com.facebook.react.cxxbridge.JSBundleLoader...//这行改为import com.facebook.react.bridge.JSBundleLoader 这个错误在我写这篇的时候作者已经修改了，暂时还没传到npm上，估计后面版本就没有这个错误了。...解决：在项目根目录自己创建一个名为rn-cli.config.js的文件。

1.9K5 0

Android原生项目集成React Native

最近，很多的公司，特别是小公司、小项目，为了解决人力成本的问题，都开发将移动原生开发转到了跨平台开发，或者原生+h5的混合开发，今天要说的是如何在原生项目中集成React Native。...如果是一个新项目，并且以应用为主的，大可以使用React Native来进行开发，关于这方面的内容，不做讲解，读者可以查看我之前的博客，或者阅读《React Native移动开发实战》。...1，安装React Native 首先，在你的安卓项目的根目录下执行如下命令： npm init 操作完成之后，在你的Android项目根目录下会出现一个package.json文件。...package.json主要是项目的RN的依赖配置文件，其内容如下： { "name": "kingtv", "version":

1.1K2 0

react-native 集成极光推送jpush-react-native时的小问题

android的一个报错 ... set canOverrideExistingModule=true 解决: 问题是在/android/app/src/java/......undefined错误如果使用官方例子notifyJSDidLoad的代码，android会报cb方法undefined // 在收到点击事件之前调用此接口 if(Platform.OS === '...//android和ios接收到的参数结构不同，需要分别处理获取 if(Platform.OS==='android'){ const {param1...//对应的路由跳转或者其他操作 } } 即 android：const {param1,param2} = JSON.parse(message.extras) iOS: const...{param1,param2} = message param1，param2改成你要接收的参数字段名原理因为iOS平台的推送是Apns推送，json格式不同，具体格式可以百度apns推送 json

2.6K3 0

React Native 的未来与React Hooks

近期和一些朋友聊到了 React-Native 的官方重构状态，而刚好近期发布的 0.59.x 系列版本中，上层设计出现了比较大的调整，结合体验之后的状态，就想聊聊 React-Native 的现状、...一、现状相信大家对于 React-Native “要凉” 的第一印象，应该是来自于 Aribnb 的 “为什么 Airbnb 放弃了 React Native” ，如文中描述的 React-Native...React 和 React-Native 的界限。...react-native-router-flux 与 react-navigation 的升级版本需要相互对应，同时需要增加 react-native-gesture-handler 依赖，并且在 index.js...(///▽///) 跨平台完整项目与文章： Flutter 开源项目与文章 React Native 开源项目与文章 Weex 开源项目与文章完整文章目录在项目首页 ReadMe 其他文章《移动端跨平台开发的深度解析

5.1K3 0

xcode工程集成 React-native步骤

跟着网上博客步骤来集成RN发现了很多坑，但是博客内容里面却没有记录这些坑，百度了很久都没找到解决方案，最后还是在谷歌搜索里面的一篇文章找到解决办法，在此记录下方便别人快速集成RN。...2.集成React-native 新建一个xcode工程和添加配置文件新建一个文件夹NativeRNApp，再在该文件夹下新建一个name为NativeRNApp的Xcode工程，与xcode工程同目录新建一个...最好在终端下用react-native init新建一个react-native项目工程，将工程中的package.json文件内容拷贝进去： 1.png -安装React-native依赖包在ReactComponent...Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from...React-native 在NativeRNApp文件夹下新建Podfile文件，与xcode工程同目录，添加内容： pod 'React', :path => '.

3K1 0

react-native 跨平台滤镜集成

Demo 下载地址：https://github.com/XHTeng/react_native_filter_demo 刚接触RN不久，代码写的很烂，如果您有更好的优化（代码和性能都可），感谢您PR...演示效果集成步骤 1.安装gl-react npm install gl-react --save 可以参考其语法自定义滤镜 https://github.com/ProjectSeptemberInc.../gl-react 2.安装gl-react-native npm install gl-react-native --save 3.配置gl-react-native iOS配置：打开node_modules-gl-react-native-ios...@https://github.com/lwansbrough/react-native-camera.git --save 链接 react-native link react-native-camera...可以参考文档的Demo进行相机测试 https://github.com/lwansbrough/react-native-camera 这里需要注意的是，this.camera.capture

2K8 0

React Native与Android的交互

在使用RN进行跨平台开发的过程中，经常会设计到跨平台调用相关的内容，而在于RN进行交互的时候，最核心的就是RN提供的Component和Module。...其中，Component是专门将Native的UI暴露出来供JS调用的，而Native Module则是将Native的模块暴露出来供JS调用的，其用途不一样。...在实战开发中，由于RN实现的成本比较大，或者没办法实现，而原生是非常容易实现的，这时候就想到了自定义组件。...Component 例如，下面是一个自定义的View原生代码： public class MyCustomView extends View { private Paint mPaint

1.2K3 0

react-native集成微信分享记录

前言最近做了第一个用react-native写的app,记录下相关第三方插件的配置关于微信分享，主要用到了这两个库 react-native-wechat-lib react-native-wechat...我们使用的是react-native-wechat-lib,找到依赖下的该包，打开ios文件夹，将RCTWeChat.xcodeproj 导入进来 ?...sourceApplication:sourceApplication annotation:annotation]; } rn代码中使用在项目开始文件中， import * as WeChat from 'react-native-wechat-lib...WeChat.registerApp( 'appid', 'Universal Links', ); 封装wxHandle.js处理微信分享逻辑 import * as WeChat from 'react-native-wechat-lib...具体的一些API可以参考微信官方文档与插件文档，这里整理的是微信分享相关，后面做到支付再补充支付项目内容参考链接：react-native-wechat （react-native 微信分享、支付)

1.3K0 0

react-native集成微信分享记录

前言最近做了第一个用react-native写的app,记录下相关第三方插件的配置关于微信分享，主要用到了这两个库 react-native-wechat-lib react-native-wechat...react-native-wechat-lib,找到依赖下的该包，打开ios文件夹，将RCTWeChat.xcodeproj 导入进来 [z9la7vfu14.png] 在工程Build Phases...WeChat.registerApp( 'appid', 'Universal Links', ); 封装wxHandle.js处理微信分享逻辑 import * as WeChat from 'react-native-wechat-lib...具体的一些API可以参考微信官方文档与插件文档，这里整理的是微信分享相关，后面做到支付再补充支付项目内容本文首发于 react-native集成微信分享记录参考链接：react-native-wechat...（react-native 微信分享、支付)

2.8K2 0

教你轻松在React Native中集成统计的功能

在这篇文章中我会向大家分享，在React Native中集成umeng统计的方法及流程。...因为umeng官网有非常详细的集成文档集成文档，在这里我会介绍在React Native的Android和iOS中如何集成统计功能，但不会长篇大论。...如果大家想通过视频学习如何在React Native中集成统计功能，可以点这里查看第三步：高级功能在上文中我们已经完成了统计sdk的集成、配置以及最基本的使用(如果大家想通过视频学习如何在React...如果我们要进行更高级的功能，比如：计数统计与计算统计等，因为React Native应用的大部分业务逻辑的代码都是在js部分完成的，所以我们需要将计数统计与计算统计的相关功能封装成React Native...如果大家在React Native中集成umeng统计的过程中有更好的心得或遇到问题可以在本文的下方进行留言，我看到了后会及时回复的哦。

7.8K4 0

React Native与小程序的混编

，Flutter与React Native已逐渐成为移动开发社区中最受欢迎的跨平台移动应用开发框架，那么Flutter和React Native 哪个才是开发者的首选呢？...这篇文章主要对React Native做一个介绍及如何与小程序进行结合。...React Native是基于一种非常流行的语言--JavaScript，开发者更易上手；React组件包裹着现有的本地代码，并通过React的声明性UI范式和JavaScript与本地API进行交互，...脑洞开了，说干就干，在 React Native 工程基础上集成及运行小程序方案 FinClip。...集成小程序解析引擎这里我们采用凡泰集成免费社区版的小程序解析引擎，只需要 10 行代码量不到即可完成小程序集成。引入小程序引擎插件。

2.6K3 0

点击加载更多

React Native Expo急速教程 7 - AsyncStorage

使用Expo开发React-native程序（一）

用expo，从0到1 轻松学react native

iOS React Native 混合开发集成React Native

在expo下使用react-native-fast-image组件报错问题

React Native集成极光推送

React Native 集成 ArcGIS 地图

原生 Android 集成 React Native

React-Native私服热更新的集成与使用

react-native 热更新react-native-pushy集成遇到的问题

Android原生项目集成React Native

react-native 集成极光推送jpush-react-native时的小问题

React Native 的未来与React Hooks

xcode工程集成 React-native步骤

react-native 跨平台滤镜集成

React Native与Android的交互

react-native集成微信分享记录

react-native集成微信分享记录

教你轻松在React Native中集成统计的功能

React Native与小程序的混编

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐