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.3classpath '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平台上的差異
-
當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);-
borderWidth屬性在Android的Text組件上失效，解決辦法也如上段代碼一樣使用View嵌套然后在View組建上添加borderWidth屬性
-
TextInput組件通過multiline={true}設置為多行后，在iphone手機上TextInput組件的onSubmitEditing事件永遠不會被處罰，它的回調函數也不會被執行，而安卓上正常。當TextInput失去焦點的時候建議選擇
onEndEditing回調函數而不是onBlur。
8.TextInput組件文字被遮擋
先說下TextInput在android和ios兩個平台的區別。
-
只指定fontSize不指定height：
在iOS平台上，沒有指定樣式中的height鍵值的TextInput組件不會顯示。在android平台上則為正常 -
height等於fontSize:
android平台上字體的上方有部分會被遮擋，在iOS平台上底部會稍微有點被遮擋，這時候可以設置paddingTop:0,paddingBottom:0來解決。 -
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，重新構建安卓目錄，再打包恢復正常。