總結 ReactNative 遇到的各種報錯

開始嘗試用React Native 寫代碼時 經常會遇到各種各樣的報錯 , 由于編寫JSX 不像 Xcode 那樣 可以及時提示錯誤 .

所以總結一下 目前為止碰到的一些報錯 與 解決方案 還是很有必要的.

1. 最外層有多個JSX組件.

錯誤提示

錯誤提示顯示 相鄰JSX元素必須被包裹在一個標記里面.

什么意思呢 , 就是說 JSX 的最外層應該只有一個組件 . 就像iOS 的Controller 里應該只有一個 View 一樣, 剩下的所有視圖都應該包含在這里面 .

這種情況就會報上述錯誤

export default class HelloWorld extends Component {
  render() {
    return (
      <View >
        <Text >Welcome to React Native!</Text>
      </View>

      <View >
        <Text >Hello World!</Text>
      </View>
    );
  }
}

最外層只有一個View , 運行后正常

export default class HelloWorld extends Component {
  render() {
    return (
      <View >

        <Text >Welcome to React Native!</Text>
        <Text >Hello World!</Text>

      </View>
    );
  }
}

2. 未識別的變量

報錯信息

這種錯誤往往是因為沒有導入組件而導致的.

import{ }from 'react-native';

添加新的組件時需要在這里導入一下. (導入時需要注意一下大小寫)

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

export default class HelloWorld extends Component {
  render() {
    return (
      <View >
        <Text >Welcome to React Native!</Text>
      </View>
    );
  }
}

導入 Text 組件 , 運行后正常.

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

export default class HelloWorld extends Component {
  render() {
    return (
      <View>
        <Text > Welcome to React Native! </Text>
      </View>
    );
  }
}

3. 語法錯誤

報錯信息

這種錯誤是最常見 , 也是最不容易排查的 .

多寫一個 或者 少寫一個逗號 , 括號 等等 都會造成這種語法錯誤 .

這種問題的解決方法 只能是 仔細檢查一下代碼 , 多注意一下這種細節.

包括在CSS樣式表里面 如果有類似的語法錯誤 , 也會報這個錯 .

4. 注釋錯誤

報錯信息

已經習慣了用 // 來代表注釋 , 但是當 // 碰到 React Native 的時候 居然就報錯了 . 所以就特意查了一下 React Native 中 注釋的寫法 .

/*   注釋內容   */
{/*  標簽內部注釋時使用  */}

用 // 注釋后, 運行報錯

export default class HelloWorld extends Component {
  render() {
    return (
      <View >
        // <Text> Welcome to React Native!</Text>
        <Text> Hello World</Text>
      </View>
    );
  }
}

換成正常注釋方法后 , 運行正常.

需要注意的是 , 這種情況屬于標簽內部注釋 , 所以用/**/ 來注釋也會報錯

export default class HelloWorld extends Component {
  render() {
    return (
      <View >
        {/* <Text> Welcome to React Native!</Text> */}
        <Text> Hello World</Text>
      </View>
    );
  }
}

5. 未注冊應用

報錯信息

這種報錯是因為 沒有注冊應用(registerComponent) 而導致的 .

通常生成文件時 這段代碼會自動生成 , 但如果不小心改了這代碼就有可能出現這種錯誤.

/*
注冊應用(registerComponent)后才能正確渲染
注意：只把應用作為一個整體注冊一次，而不是每個組件/模塊都注冊 
*/
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

暫時發現了這么多 , 相信之后的坑會越來越多的 .

 

來自：http://www.jianshu.com/p/7f32660359ef