开始尝试用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))"
暂时发现了这么多 , 相信之后的坑会越来越多的 .
网友评论