ReactNative基础语法学习及常见问题汇总

一、基础知识

1.1 {} 与 ()

对于第一次接触ReactNative的同学，最痛苦的是什么时候使用{}，什么时候使用(),当然我也经历过那段时间，为此简单总结了下。

• ReactNative中，使用表达式的时候需要用{}包住；

style={styles.mainStyle}

• ReactNative中,在字符串中使用变量的时候，需要用{}包住;

var str = 'hello'
<Text>{str}</Text>

• ReactNative中，对象，字典需要用{}包住;

style = {}, // 最外层表达式，用{}包住
{flex:1}, // 对象，用{}包住
<View style={{flex:1}}></View>

• 创建组件<View></View>，必须要用()包住;
  因此只要返回组件，都需要用()。

render(){
    return (
        <View style={styles.mainStyle}>
        </View>
    )
}

1.2 注释

HTML标签节点内，使用{/* */}进行注释；HTML标签节点外，多行可以用/**/进行注释，单行可以用//进行注释。

使用 // 作为注释要注意，注释内容必须不在任何 html 标签里，否则会当成要显示的文本内容。

二、常见问题

2.1 How to resolve “EADDRINUSE: address already in use” error（8081端口被占用了）

Error: listen EADDRINUSE: address already in use :::8081 at Server.setupListenHandle [as _listen2] (net.js:1258:14)
at listenInCluster (net.js:1306:12)
at Server.listen (net.js:1394:7)

解决办法：

lsof -i TCP:8081 | grep LISTEN

会出现如下类似提示：

node    2464 murari   21u  IPv6 4392639      0t0  TCP *:http-alt

然后执行：

kill -9 2464

2.2 Android error “Could not get BatchedBridge, make sure your bundle is packaged properly” on start of app

react-native run-android
react-native start --reset-cache

三、拓展阅读

• React 教程
• ReactNative 教程