ReactNative 踩坑之旅 --2016-11-10更新

從年中到如今也用ReactNative上線了一個電商項目了，再實戰過程當中也經歷了不少坑，所以記錄下來，但願幫助到更多的人。前兩個是剛接觸React時接觸到的，但因爲轉到負責ReactNative的項目，所以後面記錄的都是在ReactNative實戰中遇到的問題。

1.webpack使用babel-loader後編譯報錯

報錯
ERROR in ./entry.js Module build failed: SyntaxError: /Users/yixin/Desktop/react/entry.js: Unexpected token (2:8)

說是 "<" 這個符號有問題,緣由是babel6分離爲多個包，而且默認不支持react和es2015。
所以除了npm install babel-loader --save-dev之外還須要
npm install babel-preset-es2015 babel-preset-react --save-dev。
而後在loaders中添加：

var babelPresets = {presets: ['react', 'es2015']};

   loaders: [
    {
      test: /\.js|jsx$/,
      loaders: ['babel', 'babel-loader?'+JSON.stringify(babelPresets)]
    }
]

則能夠正常運行。

2.Target container is not a DOM element

找不到dom節點：
    
    Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element.

緣由是js在頭部引入，因爲src是同步下載，而後當即執行，而此時你的渲染樹還未構建完畢，所以找不到dom節點。解決方法是在頁面底部進行調用。

3.Super expression must either be null or a function, not undefined

我是按照以前買的用JavaScript開發移動應用的例子來編寫的，而後報了這個錯。個人頭部聲明是這樣的

var React = require('react-native');
var {
  Text,
  View
} = React;

通過查詢後是因爲'React'和'Component'從'react native'分離到了'react'模塊。因此這裏咱們只引入'react native'的模塊是不夠的，改爲這樣：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

成功運行。另外推薦RN的ES5和ES6的語法對照表，做爲初學者仍是頗有必要了解的
React/React Native 的ES5 ES6寫法對照表

後面還會持續更新。。。

4.ReactNative 安卓環境 Could not resolve all dependencies for configuration ':app:_debugCompile'

問題以下：

* What went wrong:
A problem occurred configuring project ':app'.
> Could not resolve all dependencies for configuration ':app:_debugCompile'.
   > Could not find com.android.support:support-v4:23.2.1.
     Searched in the following locations:
         file:/Users/yixin/.m2/repository/com/android/support/support-v4/23.2.1/support-v4-23.2.1.pom
         file:/Users/yixin/.m2/repository/com/android/support/support-v4/23.2.1/support-v4-23.2.1.jar

須要在sdk管理器中安裝 Android Support Repository模塊

5.ReactNative 安卓環境 Execution failed for task ':app:installDebug'.

問題以下：

* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: device '76UBBKT22AZQ' not found

須要更改android的build.gradle，將第8行gradle的版本號更改成1.2.3
classpath 'com.android.tools.build:gradle:1.2.3' 就能夠正常運行了。

6.安卓模擬器運行報錯 emulator: ERROR: x86 emulation currently requires hardware acceleration!Please ensure Intel HAXM is properly installed and usable.CPU acceleration status: HAXM must be updated (version 1.1.5 < 6.0.1).

解決辦法：在sdkTools安裝Intel x86 Emulator Accelerator(HAXM installer)的狀況下，

訪問sdk目錄下的extra->intel->Hardware_Accelerated_Execution_Manager下執行intelHAXM.dmg，重啓android studio能夠正常運行模擬器

7.reactNative getInitialState: function() {}報錯

緣由：在ES5語法下，React Native 組件的狀態變量是在 getInitialState函數中初始化的

let MyComponent = React.createClass({
    getInitialState: function() {
        return {
            scrollTop: new Animated.Value(0),
        };
  },
});

而在ES6語法下，React Native 團隊修改了狀態變量的初始化方式，取消了單獨的 getInitialState 函數，將初始化放在構造函數中，並提供 this.state實例變量用來存儲狀態變量。
解決辦法：

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            scrollTop: new Animated.Value(0),
        };
    }
}

7.React Native在android和ios平臺上的差別

1. 當Text組件的fontSize等於height的時候，因爲安卓和ios在Text組件中上方都自動留白，這時候會發現底部已經超出了組建範圍而被遮擋。若是想設置Text垂直居中的效果建議能夠用View作嵌套再經過flex佈局來作到垂直居中

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';
var aImage = require('./tab.png');
class reactNative06 extends Component {

  render() {
    return (
      <View style={styles.container}>
        <View style={{borderWidth:1,}}>
          <Text style={styles.welcome}>
            Ajfg你好
          </Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome:{
    width:200,
    fontSize:50,
    borderWidth:1,
    textAlign:'center'
  }
});

AppRegistry.registerComponent('reactNative06', () => reactNative06);

1. borderWidth屬性在Android的Text組件上失效，解決辦法也如上段代碼同樣使用View嵌套而後在View組建上添加borderWidth屬性

2. TextInput組件經過multiline={true}設置爲多行後，在iphone手機上TextInput組件的onSubmitEditing事件永遠不會被處罰，它的回調函數也不會被執行，而安卓上正常。當TextInput失去焦點的時候建議選擇onEndEditing回調函數而不是onBlur。

8.TextInput組件文字被遮擋

先說下TextInput在android和ios兩個平臺的區別。

1. 只指定fontSize不指定height：
   在iOS平臺上，沒有指定樣式中的height鍵值的TextInput組件不會顯示。在android平臺上則爲正常

2. height等於fontSize:
   android平臺上字體的上方有部分會被遮擋，在iOS平臺上底部會稍微有點被遮擋，這時候能夠設置paddingTop:0,paddingBottom:0來解決。

3. height大於fontSize,有時候也會有遮擋，解決辦法如上

9.安裝app報錯：signatures do not match the previously installed version; ignoring!

reactnative新簽名的apk在手機上安裝不了（是由於以前調試的應用沒刪乾淨）

解決辦法：adb uninstall "com.pepperrn" 手動經過包名來清理app。
而後再安裝就正常了

10.ReactNative調試模式下正常，release版本本地圖片顯示不出來

問題描述：ReactNaitve調試模式下運行正常，打包release版本時沒將靜態資源文件打包進去，致使本地圖片加載不出來
解決辦法：能夠將android目錄刪除掉而後運行react-native android，從新構建安卓目錄，再打包恢復正常。