总结 ReactNative 遇到的各种报错

移动开发 来源:Light均 142℃ 0评论

开始尝试用React Native 写代码时 经常会遇到各种各样的报错 , 由于编写JSX 不像 Xcode 那样 可以及时提示错误 .
所以总结一下 目前为止碰到的一些报错 与 解决方案 还是很有必要的.


1. 最外层有多个JSX组件.


错误提示

错误提示显示 相邻JSX元素必须被包裹在一个标记里面.
什么意思呢 , 就是说 JSX 的最外层应该只有一个组件 . 就像iOS 的Controller 里应该只有一个 View 一样, 剩下的所有视图都应该包含在这里面 .

这种情况就会报上述错误

export default class HelloWorld extends Component {
  render() {
    return (
      
        Welcome to React Native!
      

      
        Hello World!
      
    );
  }
}

最外层只有一个View , 运行后正常

export default class HelloWorld extends Component {
  render() {
    return (
      

        Welcome to React Native!
        Hello World!

      
    );
  }
}

2. 未识别的变量


报错信息

这种错误往往是因为没有导入组件而导致的.

import{ }from 'react-native';
添加新的组件时需要在这里导入一下. (导入时需要注意一下大小写)

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

export default class HelloWorld extends Component {
  render() {
    return (
      
        Welcome to React Native!
      
    );
  }
}

导入 Text 组件 , 运行后正常.

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

export default class HelloWorld extends Component {
  render() {
    return (
      
         Welcome to React Native! 
      
    );
  }
}

3. 语法错误


报错信息

这种错误是最常见 , 也是最不容易排查的 .
多写一个 或者 少写一个逗号 , 括号 等等 都会造成这种语法错误 .
这种问题的解决方法 只能是 仔细检查一下代码 , 多注意一下这种细节.
包括在CSS样式表里面 如果有类似的语法错误 , 也会报这个错 .

4. 注释错误


报错信息

已经习惯了用 // 来代表注释 , 但是当 // 碰到 React Native 的时候 居然就报错了 . 所以就特意查了一下 React Native 中 注释的写法 .

/*   注释内容   */
{/*  标签内部注释时使用  */}

用 // 注释后, 运行报错

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

换成正常注释方法后 , 运行正常.
需要注意的是 , 这种情况属于标签内部注释 , 所以用/**/ 来注释也会报错

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

5. 未注册应用


报错信息

这种报错是因为 没有注册应用(registerComponent) 而导致的 .
通常生成文件时 这段代码会自动生成 , 但如果不小心改了这代码就有可能出现这种错误.

/*
注册应用(registerComponent)后才能正确渲染
注意:只把应用作为一个整体注册一次,而不是每个组件/模块都注册 
*/
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

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

关闭

IT问道推荐

银行贷款频频被拒?
“Dr信用牛牛”让你远离信用污点 国内首家信用健康管理平台免费为你提供信用修复方案