总结 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);

6. 找不到服务器

报错信息

找不到服务器
有可能的原因是：
1.后台没有开启服务（- run 'npm start'）。有时服务刚开起来，刷新几次可解决该问题。
2.AppDelegate 里面设置的URL 有误 ， 公司内是动态IP，所以本机的IP有可能会改变。
3.没有联网

watchman --no-pretty get-sockname returned with exit code=1, signal=null 

运行过程中 watchman 一直在报错 。
重新安装watchman

ruby -e "$(curl -fsSL [https://raw.githubusercontent.com/Homebrew/install/master/install](https://raw.githubusercontent.com/Homebrew/install/master/install))"

参考网址

---

暂时发现了这么多 , 相信之后的坑会越来越多的 .