react-native
文章平均质量分 62
WYQ_XQ
量的积累引起质的飞跃!!!
展开
-
rn webview问题
1:Error loading page Domain: WebKitErrorDomain Error Code: 101 The URL can’t be shown参考:https://github.com/wuyunqiang/ReactNativeUtil/issues/481:webview添加header问题header中是以key:value的形式存在的并且,ke...原创 2018-05-25 18:38:50 · 2423 阅读 · 0 评论 -
TabNavigator自定义Tab(2)
TabNavigator自定义Tab(1) 实现如下效果 其实这种效果很简单只要实现自定义tab然后将需要凸起的Tab单独拿出来设置成绝对布局就可以实现了。 关键代码: render(){ const {navigation,jumpToIndex} = this.props; const {routes,} = navigation.state原创 2018-01-12 17:50:00 · 1237 阅读 · 0 评论 -
如何在新建的acitvity上使用RN语法写界面?
1:新建activity 继承reactActivity 并复写getMainComponentName方法2:在rn端通过AppRegistry注册这个activity的组件'use strict';import React from 'react';import ReactNative from 'react-native';const { AppRegist原创 2017-04-05 17:51:25 · 927 阅读 · 0 评论 -
To run dex in process, the Gradle daemon needs a larger heap. It currently has 1024 MB. For faster b
andorid studio 运行正常,通过命令行react-native run-android 报错。 如图: 解决: 1:app下build.gradle修改 defaultConfig { minSdkVersion 19 targetSdkVersion 26 versionCode 1 versionName "原创 2017-11-27 10:57:34 · 1139 阅读 · 0 评论 -
rn封装原生jsbridge与H5交互
一:首先按照https://github.com/lzyzsd/JsBridge配置jsbridge 二:封装jsbridge给rn调用 1:新建WebViewManager继承自SimpleViewManager 2:实现createViewInstance方法 返回一个webview实例 @Override protected BridgeWebView createViewI原创 2017-11-24 16:24:07 · 2829 阅读 · 0 评论 -
Android在原生集成react native
环境: Android studio3.0 react native 0.50 Mac 10.12.6 (16G29)react native使用方式有两种: 1:直接新建一个react native项目 2:在已经存在的原生项目中集成react native项目。 今天主要讲解第二种方式的步骤。 1:新建Android原生项目 2:在原生项目的根目录下执行npm init 输入pa原创 2017-12-01 14:44:04 · 3432 阅读 · 2 评论 -
android加载gif图片
版本信息:OS: macOS Sierra 10.12.6Node: 8.3.0Yarn: 0.27.5npm: 5.5.1Xcode: Xcode9.01 Build version 9a1004Android Studio: 2.3.3 react-native: 0.49.3react: 16.0.0-beta.5rn上面android默认不支持gif图片加载需要在g原创 2017-11-06 16:40:32 · 274 阅读 · 0 评论 -
rn+redux+immutable+saga+react-navigation技术栈
1:安装组件package如下:"dependencies": { "immutable": "^3.8.2", "react": "16.0.0-beta.5", "react-native": "0.49.3", "react-navigation": "^1.0.0-beta.15", "react-redux":原创 2017-11-28 15:43:02 · 988 阅读 · 0 评论 -
RN iOS网络是否连接bug
react native 是有判断网路是否连接这个接口的NetInfo。 可以通过这样来判断:isConnected=true 有网络,反之没有网络。 data = await NetInfo.isConnected.fetch().then((isConnected) => { console.log('isConnected',isConnected);原创 2017-11-13 14:00:47 · 1008 阅读 · 0 评论 -
react navigation返回到任意页面(不集成redux)
react navigation默认是使用key作为goback的参数进行返回的,这个key是一个动态生成的,而不是我们定义的routeName。 网上也有很多方法有的说更改源码,有的说是集成redux。更改源码的方式我也尝试过但是如果开启滑动返回属性,很容易就卡死。集成redux是一个不错的方式,但对于新手来说redux的模式还是太过于复杂,况且redux的强大在于数据流的控制,仅仅一个因为一...原创 2017-09-07 13:44:16 · 10681 阅读 · 3 评论 -
自定义react navigation跳转动画
自定义react navigation跳转动画,实现上下左右跳转页面。const StackOptions = ({navigation}) => { const gesturesEnabled = true; const headerStyle= { height:Platform.OS==='ios'?SCALE(100):SCALE(60),原创 2017-08-29 16:31:00 · 2322 阅读 · 0 评论 -
TabNavigator自定义Tab
react navigation三种导航,其中TabNavigation和StackNavigation用的比较多。今天要说的就是关于TabNavigation的样式问题,可能很多人都遇到过为什么明明设置了style和tabStyle还是会有问题。 我想可能会有很多人这样写:const tabbaroption = { activeTintColor: Color.f3474b,原创 2017-10-19 14:59:19 · 3443 阅读 · 0 评论 -
react native webview与H5通信
之前写过一篇封装原生webview的文章,https://blog.csdn.net/u014041033/article/details/78625859 但是那只是android端的,不能应用iOS端,随着rn的发展,rn提供的webview也可以满足我们的开发需求,而且android&&ios 都可以统一处理,所以还是建议大家使用原生提供的组件,这里做简单的rn webvi原创 2018-05-25 18:28:26 · 3021 阅读 · 0 评论 -
react native modal android实现全屏
react native 原生modal默认不能覆盖Android的statusbar.这对于一个强迫症患者来说真是难受。一开始尝试将statabar透明但还是不能绘制到statusbar。最后无奈之下只好参考react native的modal去自己写一个啦。 参考modal目录:node_modules/react-native/ReactAndroid/src/main/java/com/...原创 2018-02-13 19:03:33 · 6524 阅读 · 0 评论 -
codepush4之linux下配置自己服务器
codepush热更新 codepush2之配置自己的服务器 codepush3之Android原生引用集成codepush通过ssh方式远程连接服务器 ssh 用户名@ip 例如: ssh root@172.28.32.244 用户名:root 密码:123456服务器配置1: 通过nvm安装node 安装nvm 参考:https://github.原创 2018-02-01 11:33:06 · 909 阅读 · 1 评论 -
codepush3之Android原生引用集成codepush
codepush热更新 codepush2之配置自己的服务器 codepush4之linux下配置自己服务器 其实原生集成rn在集成codepush与新建rn项目集成codepush最主要的区别是node_modules的路径发生变化了另外应用也不再是一个reactApplication了。大多数错误都是这两点引起的。 这是我的文件目录 1:项目路径下命令行输入yarn add re原创 2018-01-08 16:26:52 · 2112 阅读 · 1 评论 -
codepush2之配置自己的服务器
codepush热更新 codepush3之Android原生引用集成codepush codepush4之linux下配置自己服务器codepush会去访问微软的服务器,在国内网速特别慢基本上和不能用没有什么区别。今天我们就来配置自己的服务器。 好处 1:网络不受限制 2:自是服务器端变化了codepush的命令依旧可以使用功能上不受影响。配置步骤这里我们以本地服务器为例。原创 2017-11-09 11:13:59 · 2377 阅读 · 0 评论 -
codepush热更新
codepush2之配置自己的服务器codepush3之Android原生引用集成codepushcodepush4之linux下配置自己服务器初始化阶段:1:npm install -g code-push-cli 安装客户端2:code-push -v 查看是否安装成功3:code-push register 在codepush注册账原创 2017-06-20 14:23:17 · 4374 阅读 · 3 评论 -
pullview使用flatlist下拉上拉
站在诸多巨人的肩上,写的这个库。自己用着感觉还行,大家可以试试。 scrollview&&FlatList android&&ios 1:flatlist与scrollview下拉刷新上拉加载更多 2:没有网络没有数据状态页面。 3:解决react-native-pull中iOS下拉头部出现空白问题。GitHub:https://github.com/wuyunqiang/react原创 2017-11-06 16:49:51 · 671 阅读 · 0 评论 -
react-native封装原生下拉刷新组件
之前改进过一个react-native-pull组件解决了iOS上刷新头部出现空白问题,并且将listview改成了flatlist。 github如下: react-native-pullview这是纯js写的Android&&iOS都可以使用。在iOS上面性能还是可以的,但是在Android上滑动时虽然也可以使用但是总是感觉有点卡顿,不是很如意。 因为rn在Android上滑动事件就不是原创 2018-01-22 18:37:39 · 3877 阅读 · 1 评论 -
RN权限工具
首先npm install react-native-permissions --savernpm link 安装这个lib详情https://github.com/yonahforst/react-native-permissions但是使用其他还是比较麻烦,所以封装成工具类,最后可以这样使用PermissionUtil.checkPermission(success,fai原创 2017-05-03 14:35:49 · 2113 阅读 · 2 评论 -
react-native 0.46升级0.51报错:Bundling `index.android.js` [development, non-minified] 0.0% (0/1), failed
如图: 解决: 1:android /app/build.gradle 添加如下:project.ext.react = [ entryFile: "index.js"]2:在MainApplication里面 @Override protected String getJSMainModuleName() { return "i原创 2018-01-04 14:49:17 · 1981 阅读 · 0 评论 -
react native动画
·一:动画组件: Animated.Image Animated.Text Animated.View二:动画函数: 1:Animated.timing() – 推动一个值按照一个过渡曲线而随时间变化。Easing 模块定义了很多缓冲曲线函数。 2:Animated.decay() – 推动一个值以一个初始的速度和一个衰减系数逐渐变为0。 3:Animated.spring() –原创 2017-08-24 16:01:56 · 1283 阅读 · 0 评论 -
scrollView中按钮如何居下?
需求:现在有这样一种情况是在开发中经常遇到的,外层是一个scrollview组件,组件内部有很多组件高度不固定,最后是一个按钮,在不满一个屏幕时按钮位居底部,当超过一屏幕时按钮位于组件的末尾,可以随着scrollview滚动。效果图:![scrollbtn.gif](http://upload-images.jianshu.io/upload_images/3353755-3df39c原创 2017-09-13 19:10:29 · 649 阅读 · 0 评论 -
RN仿QQ实现滑动删除
效果图:通过react-native提供的PanResponder组件来处理滑动事件,类似于android中的view事件传递机制完整代码:https://github.com/wuyunqiang/SlideItem原创 2016-10-18 21:29:28 · 2849 阅读 · 0 评论 -
react native:Expected a component class,got [Object Object ]
错误截图:错误代码:改正:将标签的名字头字符改成大写。解决。原创 2016-10-17 14:22:09 · 7373 阅读 · 0 评论 -
listview实现网格布局显示不全,不滑动
使用react-native组件listview实现网格布局遇到listview显示不全 只显示第一行 而且不能滑动,原因解决办法如下:数据源:错误视图:错误代码段:改正后正确视图:正确代码段:错误原因:因为listview继承scrollview,官方文档这样介绍scrollviewScrollView必须有一个确定原创 2016-09-11 16:53:45 · 1903 阅读 · 0 评论 -
react封装二维码
功能:可以使用相机扫描二维码得到数据,从本地相册选择二维码图片得到数据效果图:github关键代码:https://github.com/wuyunqiang/mywork/tree/react_qrcode(只有Android部分)原创 2016-03-06 15:07:07 · 3124 阅读 · 1 评论 -
react与native异步交互的几种方式
1:通过函数回调,传递一个string或者一个object 不能传递json如果想传递json格式 可以将json转成string 到react端再解析会json2:通过promise 使用async,await 传递一个map3:通过事件native端可以发送参数到js 传递一个map1:代码:/** * index.android.js */ 'use strict';原创 2016-03-08 16:56:31 · 11576 阅读 · 1 评论 -
封装原生TextView
MainActivity :package com.testui;import com.facebook.react.ReactActivity;import com.facebook.react.ReactPackage;import com.facebook.react.shell.MainReactPackage;import com.burnweb.rnwebview.RNWebV原创 2016-02-29 16:11:18 · 956 阅读 · 0 评论 -
react-native:require含义
当遇到 require(X) 时,按下面的顺序处理。 (1)如果 X 是内置模块(比如 require(‘http’)) a. 返回该模块。 b. 不再继续执行。 (2)如果 X 以 “./” 或者 “/” 或者 “../” 开头 a. 根据 X 所在的父模块,确定 X 的绝对路径。 b. 将 X 当成文件,依次查找下面文件,只要其中有一个存在,就返回该文件,不再继转载 2016-01-30 14:04:37 · 2879 阅读 · 0 评论 -
react-native:unexpected token
在写react-native项目的时候js代码中总是显示这个错误,我明明是按照文档写的为什么会不对呢?终于纠结半天明白了原因。 react-native新建的项目默认使用ES6写法,所以如果你在用到 componentWillMount:function()这样的代码时会运行出错 解决:改成ES6写法componentWillMount(){} 总结:原创 2016-01-30 13:59:44 · 9667 阅读 · 0 评论 -
react-native之js事件发送并得到返回结果
1:新建一个react-native项目,将Android部分导入到Androidstudio中2:新建一个类 RecevierModule继承ReacContextBaseJavaModule代码如下:package com.wyq;import android.util.Log;import com.facebook.react.bridge.Callback;i原创 2016-01-30 13:44:52 · 3553 阅读 · 1 评论 -
react-native之module的使用
实现自定义Toast模块->ToastM(ToastModule在组件中已经存在了不能重名 因此起名ToastM)1:新建一个react-native项目,将Android部分导入到Androidstudio中2:新建一个类 ToastM 继承ReacContextBaseJavaModule 代码如下:package com.wyq;import android.ut原创 2016-01-30 12:51:21 · 9807 阅读 · 4 评论 -
react native 组件间通信 局部刷新
组件化是react-native的最大优点之一,因为组件化我们可以做到局部刷新,提高性能。如图所示 父组件包含连个子组件 添加可以动态增加子组件log输出:add关键代码:_onPress() { if(show){/*显示删除时 不能添加*/ return ; } let arr = t原创 2016-09-21 22:43:58 · 9432 阅读 · 0 评论 -
微信,新浪登录分享遇到的问题
问题一:项目要集成微信,新浪第三登录分享功能,通过shardsdk,首先获取sharesdk appkey 获取微信,微博appkey appsecret 配置签名文件,等等然后发现微信授权页面是可以调起来,但是并没有登录成功。如图:解决:如果没有出现你应用的图标和微信平台上配置名称,那说明是你配置的appkey appsecret 配置签名文件有错误,一般都是ap原创 2016-12-04 17:17:00 · 763 阅读 · 0 评论 -
react-native-elements/SwipeDeck android bug
安装react-native-elements库文件 详见: https://github.com/react-native-training/react-native-elements/blob/master/default_installation.md SwipeDeck ios 运行结果: Android 运行结果: 修改代码: SwipeDeck/renderCards如原创 2017-07-10 13:40:50 · 948 阅读 · 0 评论 -
react native组件通信方式
1:父组件给子组件通过props2: 通过回调父组件传递一个函数 子组件将执行结果回传给父组件3:通过ref方式引用组件调用方法,传递参数。4:通过广播事件监听DeviceEventEmitter 注册监听事件5:如果使用redux 通过getstate获取全局唯一状态树异步与原生通信: react与native异步交互的几种方式原创 2017-06-30 11:09:29 · 886 阅读 · 0 评论 -
setState详解
首先如果直接在setState后面获取state的值是获取不到的 如图: 第一次,第二次打印都是初始值。通过异步方法调用可以获得值。 那么在实际的项目中我们应该怎么写呢? 因为setState是可以接受两个参数的,一个state,一个回调函数。因此我们可以在回调函数里面获取值。 所以我们可以得出结论: 1:setState异步调用 2:批量处理 并不是调用一次就会更新一次rende原创 2017-07-10 17:42:56 · 5332 阅读 · 0 评论 -
Touchable系列的坑
1:TouchableOpacity:只能显示透明度的变化,不用设置点击事件就可以显示,这个过程并不会真正改变视图层级,大部分情况下很容易添加到应用中而不会带来一些奇怪的副作用2:touchablehighlight:除了透明度以外还可以显示其他颜色,但是必须设置点击事件才能正确显示按下的颜色。3:touchableWithoutFeedback原创 2016-09-11 17:24:51 · 2688 阅读 · 0 评论