![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React Native
文章平均质量分 65
使用JavaScript和React编写原生移动应用 搭建环境开始使用 使用JavaScript和React编写原生移动应用 React Native使你只使用JavaScript也能编写原生移动应用
I-T枭
这个作者很懒,什么都没留下…
展开
-
h5各种定位方式(浏览器,公众号,小程序,App)
h5各种定位方式(浏览器,公众号,小程序,App)html5 geolocation 获取地理定位遇到 POSITION_UNAVAILABLE不管是原生iOS APP嵌入单个h5页面,还是都是h5页面的webapp也好,只要涉及到定位都会遇到这个情况。当请求iOS开始定位的时候,会弹出一个提示框,提示你是否"允许"定位,允许定位继续下一步,如果一不小心点了下"不允许"之后,会发现,下次进到这个h5之后再也不会提示请求定位权限的提示框了。"不允许"被缓存了下来。再次调用 geolocation原创 2021-05-13 12:28:37 · 3431 阅读 · 0 评论 -
一招教你解决react-native模块版本与自身不同的问题
由于作者的问题或者 版本本身问题 有些模块 build.gradle 里的compileSdkVersion属性会和根目录下的build.gradle里配置的不同导致打包失败简单解决办法就是 直接修改对应包里的配置 但是这种办法 对于重新npm i 之后需要重新修改 比较麻烦可以使用如下办法修改 android/app/build.gradle 文件增加如下代码subprojects { afterEvaluate {project -> if (proje..转载 2020-05-27 11:58:18 · 981 阅读 · 0 评论 -
AndroidStudio Gradle下载速度慢解决方法
1 找到工程项目的build.gradle 2 注释掉 jcenter() ,改用国内阿里云的maven库地址 这里注意,只需要分别修改 buildscript 和 allprojects 的 repositories 即可// Top-level build file where you can add configuration options common to all sub-pr...转载 2020-04-19 16:20:24 · 1310 阅读 · 0 评论 -
[React Native] gradle配置--离线下载
遇到问题在开发RN项目中运行Android项目过程中出现这个问题前期准备了好多工作,到这一步卡死了!! 解决方案:科学上网到这里大家都估计是网络问题,有些时候游戏资源我们下载起来很费劲。 尝试科学上网,重新下载,发现并没有什么效果。离线安装离线安装在Android环境的时候ADT SDK这些都尝试过离线安装的方式的方式。 复制控制台地址到单独下载未果,是啊! 如果这个地址可以...原创 2020-04-14 16:40:54 · 1180 阅读 · 0 评论 -
react-native-update:compileReleaseNdk.NDK not configured
错误信息* What went wrong:Execution failed for task ':react-native-update:compileReleaseNdk'.> NDK not configured. Download the NDK from http://developer.android.com/tools/sdk/ndk/.Then add ndk....原创 2020-04-09 01:17:05 · 241 阅读 · 0 评论 -
一行指令,获取APK签名摘要,versioncode等信息
在jdk/bin目录先打开cmd,执行如下命令:keytool -printcert -jarfile xxx.apk# 最后是你APK的位置,好像zip压缩也可以xxx.apk是apk的全路径原创 2020-04-05 11:12:05 · 249 阅读 · 0 评论 -
React-Native App启动页制作(安卓端)
这篇文章是根据开源项目react-native-splash-screen来写的。在使用react-native-link命令安装该包后不知是何原因导致app无法运行了。issue也有很多用户说安装该包后项目出错。其实制作app启动页很简单,大可不必引用该包。下面开始正文。app启动页第一是为了宣传,第二是为了防止在app初始化期间屏幕白屏。所以app启动页不能干扰mainActivity的...转载 2020-04-03 16:38:18 · 282 阅读 · 0 评论 -
react-native 在Android 9.0 上请求fetch http失败
android 9.0 默认禁止访问不安全的请求,比如http,采坑……解决方法:+方法一: 使用认证过的https(我用的阿里云免费证书,如果使用https还得配置,所以用了http)+方法二(两步):第一步: 在 res 下新增一个 xml 目录,然后创建一个名为:network_security_config.xml 文件如下图:image.png内容...原创 2020-03-31 00:39:11 · 646 阅读 · 0 评论 -
react-native(Android)开发 Error:The number of method references in a .dex file cannot exceed 64K.
Android开发 Error:The number of method references in a .dex file cannot exceed 64K.在Android系统中,一个App的所有代码都在一个Dex文件里面。Dex是一个类似Jar的存储了多有Java编译字节码的归档文件。因为Android系统使用Dalvik虚拟机,所以需要把使用Java Compiler编译之后的cla...原创 2020-03-14 17:34:53 · 557 阅读 · 0 评论 -
React-Navigation(二),goBack的使用(两级)
假设假设有三个页面A、B、C,栈中是A->B->C,即A页面跳转至B页面,B页面跳转至C页面;(现实场景中的例子A:普通页面,B:登录页面,C:注册页面)在pop的过程中,C pop-> B , B pop-> A都很轻松,在使用了 React-Navigation后,在相应的screen页面拿到navigation,调用其goBack方法就能实现页面回退:...原创 2020-03-13 11:14:16 · 2944 阅读 · 0 评论 -
React Native更改了项目路径导致编译错误。
一:重运行,项目报错(原本OK的项目)在项目文件夹中有一个package.json 文件,里面记录了该项目所有安装的依赖环境,若项目文件出现依赖环境报错的情况cd android && gradlew clean对于项目出现出现.../.../debug/.../../文件夹报错,可能是缓存导致的问题,进入android文件夹下,输入命令 gradlew clean...原创 2020-03-09 17:10:23 · 721 阅读 · 0 评论 -
React Navigation2.0配置createBottomTabNavigator
// In App.js in a new projectimport React,{ Component } from 'react';import { View, Text ,StyleSheet,Image} from 'react-native';import { createStackNavigator,createBottomTabNavigator } from 'rea...原创 2020-03-09 14:05:54 · 268 阅读 · 0 评论 -
【React-native】React-native键盘遮挡TextInput,使用 KeyboardAvoidingView 解决
所有APP都有表单提交,键盘是千万不能遮挡的,而且在最后一项输入的时候,底部的 【提交/登录】按钮需要弹上来显示安装插件:npm i react-native-keyboard-aware-scroll-view --saveyarn add react-native-keyboard-aware-scroll-view然后,用如下包裹你的 input 输入组件&l...原创 2020-02-22 21:15:20 · 1079 阅读 · 0 评论 -
React Native获取手机的各种高度
一、窗口高度即图中黄色+蓝色部分import { Dimensions } from "react-native";const deviceHeight = Dimensions.get('window').height; 二、屏幕高度即图中黄色+蓝色+红色部分import { Dimensions } from "react-native";const devi...转载 2020-02-21 15:09:50 · 1164 阅读 · 0 评论 -
React-Native项目中使用Redux
前言网上别人的文档都是 直接 就是上reduxredux-thunkreact-redux,immutable这样的一套,这个有经验的看还行,新手看就很吃力了,需要了解一步一步的安装redux达到开发要求我觉得这需要一个学习的过程,拔苗助长不是好事这是我写项目的逐步搭建的过程,欢迎查看源代码github-pinduoduoRedux安装redux(后面再安装(react-...原创 2020-02-12 20:08:12 · 379 阅读 · 1 评论 -
React Native新项目启动报错'React/RCTBridgeDelegate.h' file not found
React Native版本:0.61.4解决方法:cd ios pod deintegrate pod install拿到别人写的一个react-native demo,版本0.60.4的。react-native run-ios 的时候报错 'React/RCTBridgeDelegate.h' file not found。然后各种百度,在Xcode上一顿猛操作,结果都不管用。...原创 2020-01-01 06:44:49 · 1249 阅读 · 0 评论 -
react-native环境配置
一、Node环境安装下载地址:http://nodejs.cn/download/如果用不到最新特性的话,一般选择稳定版本但是注意,react-native要求:Node 的版本必须大于等于 10我们点击 Windows安装包,下载完成后双击打开,一路next,最后install就好这里推荐将安装路径放在C盘根目录,方便查看内容,当然,个人喜好,也可以默认到此为止,no...转载 2019-12-31 11:38:09 · 471 阅读 · 0 评论 -
react-native ScrollView 实现上拉滑动全屏,下拉恢复原先大小
原理:react-native ScrollView 实现上拉滑动全屏,下拉恢复原先大小1.1需求分析缩小时不允许滚动,只有上滑动能唤醒动画,移至指定位置完全展示出来后可以内部进行滑动,当滑动到顶部,再向上滑(手势是从上至下)时,缩小整个 list1.2 技术分析list 采用 react-native 组件 ScrollView / FlatView / SectionLi...转载 2019-12-03 15:26:32 · 1975 阅读 · 0 评论 -
react-native – React本机嵌套ScrollView锁定
我试图在React Native中嵌套ScrollViews;具有嵌套垂直卷轴的水平滚动。以下是一个例子:var Test = React.createClass({ render: function() { return ( <ScrollView style={{width:320, h...原创 2019-12-02 18:11:41 · 785 阅读 · 0 评论 -
ReactNative开发-ScrollView滑动冲突
ScrollView滑动冲突前言在ReactNative中,ScrollView 必须有一个确定的高度才能正常工作,对于ScrollView来说,它就是将一些不确定高度的子组件装进确定高度的容器。ScrollView内部的其它响应者没办法阻止 ScrollView本身成为响应者(也就是说,ScrollView 响应的优先级比内部组件高,且内部组件没办法改变优先级解决办法1...转载 2019-12-02 17:40:13 · 2078 阅读 · 0 评论 -
React Native绑定微信分享/登录/支付(演示+实现步骤+注意事项)
React Native(以下简称RN)绑定微信分享/微信登录/微信支付的实现演示+源码+注意事项!微信的调用大同小异,本文实现了微信的分享功能,其他功能可以在链接文档里面找到具体的方法。本文分文三个部分:一、效果展示;二、实现步骤;三、注意事项;一、效果展示二、实现步骤1.微信开放平台申请移动应用(需要缴纳300元/年费用),配置开发信息,应用包名和签名一定要填对,如图:...转载 2018-07-19 15:03:04 · 561 阅读 · 0 评论 -
React Native阴影框效果实现
React Native实现阴影框方法如下图,下面分别对其进行讨论:RN阴影实现.pngRN自带阴影RN提供了阴影样式属性,但其仅支持ios平台,在Android中需要使用elevation属性实现,但elevation仅提供一个灰色阴影,视觉效果不好。react-native-shadowreact-native-shadow插件是广为使用的一种阴影插件,ios于Andr...转载 2019-05-10 16:46:49 · 2315 阅读 · 0 评论 -
React Native回退后如何刷新界面
问题:当我们在当前界面更改数据后,点击方法:this.props.navigation.goBack()后退,如何让前一个或者前一个的前一个有关联的界面刷新数据,保持数据的实时同步显示?注:在这里我用的导航器为React Navigation,路由写法使其非常容易扩展导航逻辑,或是整合到redux中。由于路由可以嵌套使用,因而开发者可以根据不同页面编写不同的导航逻辑,且彼此互不影响。R...原创 2019-05-11 00:51:43 · 2467 阅读 · 0 评论 -
React Native TextInput 输入框赋值没反应
TextInput 输入框赋值没反应 //RnEditText部分截图//RnEditText源码import React, { Component, PropTypes} from 'react';import { View, Text, Image, TextInput, StyleSh...原创 2019-05-11 09:45:18 · 624 阅读 · 0 评论 -
React-native调试小技巧,在Logcat输出console的log,不用摇晃也能弹出Debug 弹窗
当初新学React-native的时候,也是感觉一脸懵逼,只能看官网,看视频,去找qq群,没人帮助自己。一点一点肯,慢慢的跳坑,然后再跳出来,学到现在,也不敢说能参透notejs的原理,但是 我会把自己遇到的一些小技巧记下来,方便后人采纳。很多新手好比调试网络接口的时候会很苦恼,为什么呢? 一是因为对fetch的不熟悉,不知道这样写对不对,想通过打log的方式去看看程序执行的过程,但是reac...原创 2019-07-15 10:47:50 · 1332 阅读 · 0 评论 -
React Native 项目运行报错You have not accepted the license agreements of the following SDK components:
image.png连接上安卓雷电模拟器后再次运行项目就出现上图的报错,当时百思不得其解,上谷歌就是一顿搜,最后终于被我搜出来了!错误原因从Android Gradle plugin 2.2.0开始,gradle会自动加载需要的SDK, build-tools,但是因为没有接受license,导致加载依赖终止。解决办法(1)找到自己的android SDK位置,进入To...转载 2019-07-15 13:00:54 · 244 阅读 · 0 评论 -
react native生成APP报错:You have not accepted the license agreements of the following SDK components:
一、报错信息* What went wrong:A problem occurred configuring project ':app'.> Could not resolve all dependencies for configuration ':app:_debugApk'. > A problem occurred configuring project ...原创 2019-07-15 14:35:22 · 212 阅读 · 0 评论 -
ReactNative windows下打包生成安卓apk
create-react-native-app 运行npm run eject后根目录会产生一个andriod目录和ios目录。里面就是运行打包的配置文件。 如果你是用react-native-cli 开发RN的应该一开始就有这俩目录。比如 android 目录里面会有build.gradle,gradle.properties 等 简单说 gradle 是一个依赖管理/自动化编译测试部署打包...转载 2019-07-15 15:40:10 · 234 阅读 · 0 评论 -
react-native清除android项目缓存的命令
cd到android目录下执行:./gradlewclean原创 2019-07-15 19:02:49 · 4144 阅读 · 0 评论 -
React Native Could not expand ZIP
Execution failed for task ':app:prepareSrolkReactNativeFilePickerUnspecifiedLibrary'.Could not expand ZIP .....node_modules\react-native-file-picker\android\build\outputs\aar\react-native-file-picke...原创 2019-07-15 19:50:06 · 139 阅读 · 0 评论 -
小程序如何获取dom 元素节点
返回的 obj 有五个方法:1.obj.in(component):没用过这个方法,多用于组件的选择器。2.obj.select(selector):获取指定的节点,selector是css选择器。返回一个NodesRef对象实例,可以用于获取节点信息。3. obj.selectAll(selector):获取指定的节点,selector是css选择器。返回一个Nod...原创 2019-07-19 10:58:20 · 15478 阅读 · 0 评论 -
react-native Mac环境下找不到
Mac中找不到.bash_profile则自己创建.bash_profile文件1.启动Terminal终端工具2.输入cd ~/ 进入当前用户的home目录或cd /Users/YourUserName3. 创建:touch .bash_profile4.打开并编辑:open -e .bash_profile5.保存关闭,其实创建了一个空文件6.更新:so...原创 2019-09-10 10:41:50 · 763 阅读 · 0 评论 -
Build fails with an error: Execution failed for task ':react-native-google-analytics-bridge:compileD
Build fails with an error: Execution failed for task ':react-native-google-analytics-bridge:compileDebugJavaWithJavac'.1,问题Build fails with an error:Execution failed for task ':react-native-goog...原创 2019-05-19 15:13:05 · 398 阅读 · 0 评论 -
Windows 下React Native 打包APK 错误解决
今天学习window下将React Native 打包成Android Apk 的时候遇到一个坑,先将解决方法记录一下;问题:按照RN官网一步步操作:官网地址:https://reactnative.cn/docs/0...以为能一次成功,结果悲剧了,报错如下FAILURE: Build failed with an exception.* Where:Build file '...原创 2019-05-19 14:50:13 · 379 阅读 · 0 评论 -
react-native-video使用攻略
源码在此 仅供参考一、简介react-native-video是一个可以播放视频的组件,它的用法简单,功能完备,是React native项目中很好用的一个Video播放的组件。它的功能主要有以下10个:控制播放速率 控制音量大小 支持静音功能 支持播放和暂停 支持后台音频播放 支持定制样式,比如设置宽高 丰富的事件调用,如onLoad,onEnd,onProgress...原创 2019-03-02 17:23:11 · 3065 阅读 · 1 评论 -
react-native 之布局篇
宽度单位和像素密度react的宽度不支持百分比,设置宽度时不需要带单位 {width: 10}, 那么10代表的具体宽度是多少呢?不知道是官网文档不全还是我眼瞎,反正是没找到,那做一个实验自己找吧:默认用的是iPhone6的模拟器结果是:我们知道iPhone系列的尺寸如下图:可以看到iphone 6的宽度为 375pt,对应了上边的375,由此可见react的单位为...原创 2019-02-21 17:41:24 · 1016 阅读 · 0 评论 -
react-native android/ios 根据配置文件编译时自动修改版本号
开发react-native时大都有过这个操作,当版本迭代时候要修改app版本号时,一般都这样做Android:的要修改build.gradle文件的versionName ios:打开xcode修改Info.plist的Bundle versions string, short这过程特别繁琐。。。无法忍受接下来,稍微改一下,让每次编译的时候自动从配置文件读取...原创 2018-08-13 09:57:40 · 1395 阅读 · 1 评论 -
React-Native Fetch网络请求的简单封装
import { Alert } from 'react-native';//export const CTX = 'http://112.74.163.201:8085/zft_app/'; // 需要设置成ip地址,不能设置成localhost//export const CTX = 'http://192.168.3.110:8061/zft/';export const CTX ...原创 2018-07-19 18:10:24 · 1700 阅读 · 0 评论 -
React Native 项目(React Native 打印 log 日志输出)
import React, {Component} from 'react';import { AppRegistry, Platform, StyleSheet, View, Text, Image, Dimensions, PixelRatio,} from 'react-native';const instructio...转载 2018-07-19 18:08:09 · 14045 阅读 · 0 评论 -
react-native 打开微信等其他App
一、常用URL SchemeQQ: mqq:// 微信: weixin:// 新浪微博: weibo:// (sinaweibo://) 腾讯微博: tencentweibo:// 淘宝: taobao:// 支付宝: alipay:// 美团: imeituan:// 知乎: zhihu:// 优酷: youku://二、配置Scheme白名单(仅ios,Android平...原创 2018-07-19 17:42:53 · 2520 阅读 · 0 评论