ReactNative进阶(六):ReactNative语法学习及常见问题汇总

一、基础知识

1.1 {} 与 ()

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

  • ReactNative中,使用表达式的时候需要用{}包住;
css 复制代码
style={styles.mainStyle}
  • ReactNative中,在字符串中使用变量的时候,需要用{}包住;
java 复制代码
var str = 'hello'
<Text>{str}</Text>
  • ReactNative中,对象,字典需要用{}包住;
java 复制代码
style = {}, // 最外层表达式,用{}包住
{flex:1}, // 对象,用{}包住
<View style={{flex:1}}></View>
  • 创建组件<View></View>,必须要用()包住; 因此只要返回组件,都需要用()
java 复制代码
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)

解决办法:

javascript 复制代码
lsof -i TCP:8081 | grep LISTEN

会出现如下类似提示:

javascript 复制代码
node    2464 murari   21u  IPv6 4392639      0t0  TCP *:http-alt

然后执行:

javascript 复制代码
kill -9 2464

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

shell 复制代码
react-native run-android
react-native start --reset-cache

三、延伸阅读

在学习一门新语言,搭建完新项目时,有必要了解下项目结构。

HelloWorld > |-- android > |-- ios > |-- node_modules > |-- package.json > |-- index.js

> |-- img > |-- public > |-- scene > |-- libs

android:Android原生工程目录;

ios:IOS原生工程目录;

package.jsonReact Native是基于javasript开发的语言,使用npm做为包管理工具,这个文件就是npm的包管理文件,主要配置项目依赖的第三方包;

index.js:这个文件是IOSAndroid在相应设备上打包运行的入口文件;(备注:早期React Native项目应该是index.ios.jsindex.android.js两个单独的入口文件)

img:存放界面要显示的png图片;

public:存放工具js,网络请求js的封装,数据存储js等相关操作的js;(备注:可以在public中创建分类目录,public/net、public/datastorage等)

scene:存放项目的JS组件(界面);(备注:可以在scene目录下创建不同功能模块的目录,例如scene/draw,scene/user,scene/home等二级三级目录)

四、拓展阅读

相关推荐
万少2 分钟前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos
满分观察网友z13 分钟前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端
满分观察网友z16 分钟前
别再裸写<textarea>了!一个“小”功能,我用上了它几乎所有API
前端
西西木科技丨Shopify开发机构21 分钟前
如何在 Shopify 中建立重定向
前端·html
汪子熙28 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到1129 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆33 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er38 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0641 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444044 分钟前
javaweb———html
前端·javascript·html