React Native 常見問題集合

在使用React Native時候，我記錄下比較常遇到的問題，分為以下幾類：

1. 調試問題

2. 寫法問題

3. 疑難問題

4. 奇怪問題

調試問題

1. 在react-native run-android運行后，真機上打開的空白頁面。

我測試機是紅米2A（Android 4.4.4），在調試時，發現沒有reload的菜單欄，也沒有日志出現。

原因：需要到應用->權限管理->顯示懸浮窗打開，這樣才可以查看錯誤日志。

2. 打成的apk安裝包安裝后， 替換的圖片（應用icon）沒有變，還是舊圖片？

原因：這應該是你機器本來就安裝過測試包了，有了緩存，重啟下機器就可以了。

3. 怎么進行js調試？

解答：可以在代碼里面寫一個debugger，然后在手機上點擊"start remote js debugging"，這是會自動打開一個Chrome頁面，打開開發者控制台。當代碼經過debugger時候，即可調試。

寫法問題

1. Application simpleAPP has not been registered. This is either due to a require() error during initialization or failure to call AppRegistry.registerComponent.

原因： AppRegistry.registerComponent('testProject', () => RnListView);   這一句，要看testProject這個參數有沒有寫對，是不是跟應用名一樣（你初始化的應用名）。

2. Adjacent JSX elements must be wrapped in an enclosing tag.

例如：

  render: function() {
    return (
        <h1>something</h1>
        <div>
          something else
        </div>
    );
  }
});

原因：React element can return only one element. 官方有Q&A說明，只能返回一個element，上面返回了兩個element。

3.  圖片加載不了？

例1：

var localImg = "./images/demo/newsImg2.png";
require( localImg );

例2：

require( "./images/demo/newsImg2.png");

第一種情況加載不了。

原因：為了使新的圖片資源機制正常工作，require中的圖片名字必須是一個靜態字符串，這是React規定。

4. 為什么要這樣寫onPress={ () => this.goback() } ，而不是onPress={  this.goback } ？

原因：我認為是為了保持goback函數里this的指向。

疑難問題

1. Android狀態欄的“沉浸式”設置無效？

例如：

<StatusBar
     backgroundColor='blue'
     translucent  = {true}
/>

經過我的嘗試，hidden屬性是有效，但translucent的效果沒有出現。  不過有另外解決方法：

在styles.xml加上：

     <style name="ImageTranslucentTheme" parent="Theme.AppCompat.Light.NoActionBar"> 
          <item name="android:windowTranslucentStatus">true</item> 
          <item name="android:windowTranslucentNavigation">true</item> 
     </style> 

在manifest的activity加上：

android:theme="@style/ImageTranslucentTheme"

然后在每個頁面的Header都要相應加多高度來適應：

paddingTop: 20,  
height:  68, 

2. react-native-gifted-listview 用這個組件時候，報了兩個warning！

（1）. In next release empty section headers will be rendered. In this release you can user 'enableEmptySections' flag to render empty section headers.

解決：找到node_modules下的react-native-gifted-listview，在ListView下 加個 enableEmptySections = {true} 就可以解決了。

（2）. Circular indeterminate 'ProgressBarAndroid' is deprecated. Use 'ActivityIndicator' instead.

解決：找到node_modules下的react-native-gifted-spinner，修改組件。

PS：這個組件開發者沒有及時更新。

3. TouchableHighlight的onPress事件無效，總報“undefined is not a function”？

例如：

  _pressRow(title){
          Alert.alert( 'Alert Title', "fuck",[{ text: 'OK', onPress: () => console.log('OK Pressed!')}])
    }
     _renderRowView(rowData) {
          return (
               <TouchableHighlight
                    underlayColor='#c8c7cc'
                    onPress={ () => this._pressRow(rowData.title)}>
               </TouchableHighlight>
          );
     }
     render() {
          return (
               <ScrollView>
                    <ListView
                         dataSource={this.state.dataSource}
                         renderRow={ this._renderRowView}/>
               </ScrollView>
          );
     }

原因：renderRow={ this._renderRowView}，里面渲染的列里面的this不再是最外層的this，需要改成this._renderRowView.bind(this)。

4. 尺寸怎么計算，設計圖到具體數值？

解決：這個可以查看https://segmentfault.com/a/1190000002658374 這篇文章，挺詳細的。

5. 組件之間的傳值怎么做？

解決：這個可以查看http://blog.csdn.net/gz_jero/article/details/51531247。

6. 怎么圖片顯示不完整？

代碼如下（只顯示部分）：

// Card視圖
var Card = React.createClass({
  showToast: function(num: i) {
    ToastAndroid.show(NAMES[num].toString(), ToastAndroid.SHORT);
  },

  // 左右留空, 中間匹配
  render: function() {
    return (
      <TouchableOpacity
        style={styles.button}
        onPress={() => this.showToast(this.props.num)}
      >
        <Image
          style={styles.image}
          resizeMode={'cover'}
          source={this.props.img}/>
      </TouchableOpacity>
    );
  }
});

// 批量創建
var createCardRow = (img, i) => <Card key={i} img={img} num={i}/>;

var ListViewModule = React.createClass({
  render: function() {
    var verticalScrollView = (
      <ScrollView
        style={styles.container}>
        {IMAGES.map(createCardRow)}
      </ScrollView>
    );
    return verticalScrollView;
  }
});

var styles = StyleSheet.create({

  container: {
    flex: 1,
  },

  button: {
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row',
    margin: 10,
  },

  image: {
    flex: 1,
    height: 200,
    borderRadius: 5,
    borderWidth: 2,
    borderColor: '#FF1492',
  },

  blank: {
    width: 10,
  }
});

原因：當圖片沒有設置width具體數值，彈性布局並不會將圖片自適應到整個容器寬度，而是按着圖片本身大小顯示。

簡單說就是圖片不能用flex設置寬度。（這個原因是我的猜想）

我在Web做了測試：

 <div style="width:200px;flex:'flexDirection';">
      <img src="F:\workspace_react\testProject\list_view_module\images\jessicajung.png" style="flex:1"/>
      <div style="flex:1">234</div>
 </div>

實驗結果是，上面圖片寬度還是732px，而下面的div是200px。

奇怪問題

1. 頁面變得可以左右拖動，可以看到一片空白。

原因：當Navigator組件設置的轉場動畫是Navigator.SceneConfigs.HorizontalSwipeJump，那就會導致一個神奇的效果，頁面可以左右拖動，看到一片空白區域（這個效果我覺得慎用）。

2. Github上有時有些庫按命令裝不了。

在安裝庫時候，發現了奇怪的現象。有時安裝時，安裝會報錯。

解決：嘗試加上--save或者刪除--save就可以了！

3. 為什么要從react-native、react兩個不同地方important組件？ 

例如：

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

react-native應該是包含原生組件部分，而React應該是與平台無關的基礎組件。

 

 

本文為原創文章，轉載請保留原出處，方便溯源，如有錯誤地方，謝謝指正。

本文地址 ： http://www.cnblogs.com/lovesong/p/5679340.html