React Native项目简介及改变主轴方向

本文介绍了如何配置React Native开发环境并创建一个测试项目。详细解释了项目目录结构,包括android、iOS、node_modules等关键目录的作用。同时,对APP.js页面进行了分析,包括页面布局、样式定义以及通过flexDirection属性调整布局方向的方法。

一:RN项目简介

配置完RN开发环境后,通过webstorm新建一个测试项目,进入项目跟目录如下图

1.android:此目录下是RN生成的android对应项目目录,运行Android失败时可以检测buildToolsVersion,gradle等是否一致

2.iOS:对应RN生成的项目目录(不太熟,省)

3.node_modules:依赖库,可以删除,删除后可以通过nmp install 指令重新生成

4.index.js:项目入口文件

5.app.js:开发编辑页面(之前分为两个Android.js和ios.js,更新之后合二为一)


二:对APP.js页面做简要说明:


如图:页面由3部分组成:

1:如箭头所指:该部分是导入的类库部分

2:该部分是进行页面布局等操作的部分

3:该部分是定义styles样式部分

三:通过flexDirection切换主轴方向

在跟布局设置flexDirection,图一值为“”row“,图2值为"column"


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值