总结 ReactNative 遇到的各种报错

   <p>开始尝试用React Native 写代码时 经常会遇到各种各样的报错 , 由于编写JSX 不像 Xcode 那样 可以及时提示错误 .</p>    <p>所以总结一下 目前为止碰到的一些报错 与 解决方案 还是很有必要的.</p>    <p><strong>1. 最外层有多个JSX组件.</strong></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/e87a4db668f1f7694fe9b81bda168dd8.jpg"></p>    <p style="text-align:center">错误提示</p>    <p>错误提示显示 相邻JSX元素必须被包裹在一个标记里面.</p>    <p>什么意思呢 , 就是说 JSX 的最外层应该只有一个组件 . 就像iOS 的Controller 里应该只有一个 View 一样, 剩下的所有视图都应该包含在这里面 .</p>    <p>这种情况就会报上述错误</p>    <pre>  <code class="language-javascript">export default class HelloWorld extends Component {    render() {      return (        <View >          <Text >Welcome to React Native!</Text>        </View>          <View >          <Text >Hello World!</Text>        </View>      );    }  }</code></pre>    <p>最外层只有一个View , 运行后正常</p>    <pre>  <code class="language-javascript">export default class HelloWorld extends Component {    render() {      return (        <View >            <Text >Welcome to React Native!</Text>          <Text >Hello World!</Text>          </View>      );    }  }</code></pre>    <p><strong>2. 未识别的变量</strong></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/f90b61a0e83221dec02ff6b64b8ce525.jpg"></p>    <p style="text-align:center">报错信息</p>    <p>这种错误往往是因为没有导入组件而导致的.</p>    <p>import{ }from 'react-native';</p>    <p>添加新的组件时需要在这里导入一下. (导入时需要注意一下大小写)</p>    <pre>  <code class="language-javascript">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>      );    }  }</code></pre>    <p>导入 Text 组件 , 运行后正常.</p>    <pre>  <code class="language-javascript">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>      );    }  }</code></pre>    <p><strong>3. 语法错误</strong></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/041aacdb2a01448931508dd721f61fd8.jpg"></p>    <p style="text-align:center">报错信息</p>    <p>这种错误是最常见 , 也是最不容易排查的 .</p>    <p>多写一个 或者 少写一个逗号 , 括号 等等 都会造成这种语法错误 .</p>    <p>这种问题的解决方法 只能是 仔细检查一下代码 , 多注意一下这种细节.</p>    <p>包括在CSS样式表里面 如果有类似的语法错误 , 也会报这个错 .</p>    <p><strong>4. 注释错误</strong></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/25b3ef97b8ad1bdace87baa3a374e7ed.jpg"></p>    <p style="text-align:center">报错信息</p>    <p>已经习惯了用 // 来代表注释 , 但是当 // 碰到 React Native 的时候 居然就报错了 . 所以就特意查了一下 React Native 中 注释的写法 .</p>    <pre>  <code class="language-javascript">/*   注释内容   */  {/*  标签内部注释时使用  */}</code></pre>    <p>用 // 注释后, 运行报错</p>    <pre>  <code class="language-javascript">export default class HelloWorld extends Component {    render() {      return (        <View >          // <Text> Welcome to React Native!</Text>          <Text> Hello World</Text>        </View>      );    }  }</code></pre>    <p>换成正常注释方法后 , 运行正常.</p>    <p>需要注意的是 , 这种情况属于标签内部注释 , 所以用/**/ 来注释也会报错</p>    <pre>  <code class="language-javascript">export default class HelloWorld extends Component {    render() {      return (        <View >          {/* <Text> Welcome to React Native!</Text> */}          <Text> Hello World</Text>        </View>      );    }  }</code></pre>    <p><strong>5. 未注册应用</strong></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/d2c33eba50546c6fdfafb2fb4875641f.jpg"></p>    <p style="text-align:center">报错信息</p>    <p>这种报错是因为 没有注册应用(registerComponent) 而导致的 .</p>    <p>通常生成文件时 这段代码会自动生成 , 但如果不小心改了这代码就有可能出现这种错误.</p>    <pre>  <code class="language-javascript">/*  注册应用(registerComponent)后才能正确渲染  注意：只把应用作为一个整体注册一次，而不是每个组件/模块都注册   */  AppRegistry.registerComponent('HelloWorld', () => HelloWorld);</code></pre>    <p>暂时发现了这么多 , 相信之后的坑会越来越多的 .</p>    <p> </p>    <p>来自：http://www.jianshu.com/p/7f32660359ef</p>    <p> </p>