那些年我们踩过的RN坑——android


常见错误锦集:http://www.cnblogs.com/lovesong/p/5679340.html
ListView下拉刷新和上拉加载数据:
http://lib.csdn.net/article/reactnative/40078
http://www.jianshu.com/p/dff750d8c425
http://div.io/topic/1453

热更新:
https://github.com/crazycodeboy/RNStudyNotes/
https://github.com/crazycodeboy/RNStudyNotes/tree/master/React%20Native%E5%BA%94%E7%94%A8%E9%83%A8%E7%BD%B2%E3%80%81%E7%83%AD%E6%9B%B4%E6%96%B0-CodePush%E6%9C%80%E6%96%B0%E9%9B%86%E6%88%90%E6%80%BB%E7%BB%93
http://blog.csdn.net/dongdong230/article/details/52625157
http://blog.csdn.net/goodchangyong/article/details/51323918

icon和启动页图片
http://www.cnblogs.com/allenxieyusheng/p/5804023.html

键盘遮挡输入框问题
http://www.cnblogs.com/pofabs/p/5109021.html

1.ReactNative 导入React包

importReact, {Component}from'react';
import{
AppRegistry,
Platform,//此处不可加Component 会报错
TouchableOpacity,
StyleSheet,
Navigator,
View,
Text
} from'react-native';

import Splashfrom'./Splash';
报错如下:

2.初始化state
ES5中,和属性初始化类似

var ES5Syntax = React.createClass({    
  getInitialState: function() {        
  return {esVersion: `${this.[props.name](http://props.name/)} v1.0`,            
  clickCounts: 0,        
  };    
  },
});

ES6中 ,有两种写法:

export default class ES6Syntax extends Component {    state = {        esVersion: `${this.[props.name](http://props.name/)} v1.0`,        clickCounts: 0,    }; });

在构造函数中对state初始化:

export default class ES6Syntax extends Component {    constructor(props) {        super(props);        // Operations usually carried out in componentWillMount go here        this.state = {            esVersion: `${this.[props.name](http://props.name/)} v1.0`,            clickCounts: 0,        };    }; };

备注:采用ES5初始化方法会报错,如下:

3.RN图片有时在父元素有绝对定位时,点击事件会失效(具体原因不知),可通过给图片加子元素,然后给子元素绑定点击事件。

4.安卓真机调试(摇晃手机或输入adb shell input keyevent 82)

com.android.ddmlib.InstallException: Unable to upload some APKs

(坑死人啊!!!!)
修改:

com.android.tools.build:gradleversion from1.3.1to1.2.3inbuild.gradlefile.
buildscript{repositories{jcenter()}dependencies{classpath'com.android.tools.build:gradle:1.2.3'}}

5.扫码成功之后回传扫码结果——万年坑
先大致说一下事情的起因,,,
类似微星、支付宝的扫码功能很常见,所以我们当然也不甘落后,人家有的,我们也当然得有;人家没有的,我们最好也有;
a.扫码跳回上一个页面之后,主页面下面有30%左右的黑色区域覆盖,且上一个页面的按钮操作是存在的,只是被覆盖,具体原因不详,估计具体原因应该是摄像机未释放(后来经过多方查找资料,的确是摄像头未释放)。
——解决方案,给BarScanner加样式:backgroundColor:'rgba(0,0,0,.1)'

onBarCodeRead={(e)=> {
this._barcodeReceived(e)
}}
style={{flex:1,backgroundColor:'rgba(0,0,0,.1)'}}
tourchMode={this.state.torchMode}
cameraType={this.state.cameraType}

6.导航条控件,注意大小写,大写会报错

7.打包apk时build.gradle文件配置——图片不显示问题
在模拟器时有时运行出错,需要将:

build script {
repositories {
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:1.3.1'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}

里面的1.3.1改成1.2.3即可。
但是,但是,但是,在打包签名apk时,
一定要将1.2.3改回1.3.1
一定要将1.2.3改回1.3.1
一定要将1.2.3改回1.3.1

因为早期因为版本问题(不知是安卓环境还是RN环境,会导致图片无法打包到apk
里面,但是APP正常运行,只是所有图片都不显示,也不会报错)
备注:要时刻注意RN版本问题,RN官方文档更新较快,经常会发布新的版本。
升级本地RN查看官方文档:http://reactnative.cn/docs/0.39/upgrading.html
安卓打包命令:./gradlew assembleRelease



8.使用React-native run-Android”命令运行android应用时,如果常常出现如下错误:

Starting the app (/home/xxx/soft/sdk//platform-tools/adb shell am start -n xxx/.MainActivity)…
Starting: Intent { cmp=xxx/.MainActivity }
Error type 3
Error: Activity class {xxx/xxx.MainActivity} does not exist.

尽管该应用可以安装到你的安卓设备, 不影响使用,但是看着好碍眼。本着不能规避问题的原则,还是要想办法消掉这个错误。经过本人的一番尝试,总算解决了这个碍眼的bug.在此记录一下解决的步骤。

  1. 首先是检查这个MainActivity.Java是不是真的存在,且包名和路径无误;
  2. 如果文件存在,且包名和路径没有问题,那么就打开你项目所在 的/android/app/build.gradle文件,删除defaultConfig下的applicationId,像下面这样:
apply plugin: ‘com.android.application’
android {
compileSdkVersion xxx
buildToolsVersion “xxx”
defaultConfig {
// applicationId “xxx”
}

或者将applicationId的值改成manifest文件里指定的package。
再运行”react-native run-android”,OK了。
出现这个问题的原因是你的package和applicationId不一致。如果你没有在你的 build.gradle 文件中定义 applicationId,这个applicationId 将默认为 AndroidManifest.xml 中所指定的与package相同的值。
注意:现在的Android Gradle编译系统的android项目是以applicationId作为唯一标识应用的包名。

9.安卓禁止屏幕旋转
reactnative控件:https://github.com/yamill/react-native-orientation(我测试不管用)
在一些特殊的情况下,Android开发期间会禁止某些Activity的横竖屏切换.下面介绍一种简单的方法: 只要在AndroidManifest.xml里面配置一下就可以了。 在AndroidManifest.xml的activity(需要禁止转向的activity)配置中加入 android:screenOrientation=”landscape”属性即可(landscape是横向,portrait是纵向)。
例如:

android:name=".DemoActivityt"
android:theme="@android:style/Theme.NoTitleBar"
android:screenOrientation="portrait"

另外,android中每次屏幕方向切换时都会重启Activity,所以应该在Activity销毁前保存当前活动的状态,在Activity再次Create的时候载入配置。要避免在转屏时重启activity,可以通过在androidmanifest.xml文件中重新定义方向(给每个activity加上android:configChanges=”keyboardHidden|orientation”属性),并根据Activity的重写onConfigurationChanged(Configuration newConfig)方法来控制,这样在转屏时就不会重启activity了,而是会去调用onConfigurationChanged(Configuration newConfig)这个方法。
尊重原创:http://www.open-open.com/lib/view/open1328278861750.html

10.Android肯定切换端口
看了网上好多的资料,介绍的都是iOS切换React Native端口,然后就想Android肯定也可以切换端口。仔细看了下源代码,试了下确实可以。源代码就不做详细介绍了,有兴趣的话,自己去下下来看看。
先讲下,这里说的端口8081 是facebook写死的,是打的在线包。离线包就不用通过端口,连接电脑和手机了。
说下切换端口的步骤:
很简单,比如切换8089端口。
代码中在application或者主activity中做如下设置:
@OverridepublicvoidonCreate() {super.onCreate(); mPreferences = PreferenceManager.getDefaultSharedPreferences(getApplicationContext()); mPreferences.edit().putString("debug_http_host","localhost:8089").commit(); }
为什么要在sharepreference中加”debug_http_host” ,看看android的源码就知道了,不细讲了,fb也是这么写的。
然后在项目根目录下执行:
adb reverse tcp:8089 tcp:8089
React-native start –port 8089
好了 运行项目,reload js ,手机就桥接到8089了。
ios切换端口比android简单,修改配置文件就好了,网上一堆,不细讲了。

11.坑死人之安卓二维码扫码——react-native-barcodescanner
安卓二维码扫码之后第二次进入或者手机锁屏或黑屏之后,再次打开二维码扫码出现黑屏情况。
https://github.com/ideacreation/react-native-barcodescanner/pull/61
对比修改CameraManager.java 和CameraPreview.java文件。

12.热更新Pushy,[http://update.reactnative.cn/dashboard/5672/version](http://update.reactnative.cn/dashboard/5672/version)

13.http://www.open-open.com/lib/view/open1452907915823.htm
注意pandroid是p android
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

14.安卓实体返回键[http://www.zhimengzhe.com/Androidkaifa/48187.html]
(http://www.zhimengzhe.com/Androidkaifa/48187.html)

15.安卓启动白屏(1-3秒,根据机型CPU能力而不同)
安卓启动会有两种白屏,一种是RN机制导致的android和IOS都有:
针对RN渲染机制导致的白屏问题,可用如下方式解决,
RN机制导致的用如下方式解决(也可以自己更改原生代码),但我觉得这种方式对于我这种原生开发小白来说更简单:
https://github.com/crazycodeboy/react-native-splash-screen
然而,凡是总会出现意外
按着官方文档配置好之后,还需做如下更改
首先,MainActivity要添加如下代码,否则会报错:

import android.os.Bundle;
import com.cboy.rn.splashscreen.SplashScreen;

然后,增加如下目录和文件
layout目录用于存放样式配置文件,drawable-xxhdpi用于存放启动页图片:

针对android自身原因导致的白屏可用如下方式解决,参考文章:http://www.jianshu.com/p/6917e536de27
第一步:创建一个透明主题。

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <!--设置透明背景-->
    <item name="android:windowIsTranslucent">true</item>
</style>

第二步:在AndroidManifest.xml中为application应用主题。

<application  android:name=".MainApplication"
  android:allowBackup="true"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:theme="@style/AppTheme">
  <activity 
   android:name=".MainActivity"
    android:label="@string/app_name"
    android:screenOrientation="portrait"  
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>
  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>

使用react-native-maps(0.14.0)时,真机运行总是报错,

Project react-native-maps: provided dependencies can only be jars. com.facebook.react:react-native:aar:0.44.0 is an Android Library.
:react-native-maps:prepareReleaseDependencies FAILED

进入路径:项目 --> node_modules --> react-native-maps -->lib--> android --> build.gradle,修改:

dependencies {
  provided "com.facebook.react:react-native:+"
  ...
}

为:

dependencies {
  compile "com.facebook.react:react-native:+"
  ...
}

参考文章:http://stackoverflow.com/questions/28774667/provided-dependencies-can-only-be-jars

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,165评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,503评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,295评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,589评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,439评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,342评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,749评论 3 387
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,397评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,700评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,740评论 2 313
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,523评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,364评论 3 314
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,755评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,024评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,297评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,721评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,918评论 2 336

推荐阅读更多精彩内容