当前位置:首页 > 技术分析 > 正文内容

React Native 开发之 (03) 用Atom作为React Native的开发IDE

Atom是 Github 专门为程序员推出的一个跨平台文本编辑器。具有简洁和直观的图形用户界面,并有很多有趣的特点:支持CSS,HTML,JavaScript等网页编程语言。它支持宏,自动完成分屏功能,集成了文件管理器。

1. 下载安装Atom

安装Atom时,只需要把Atom从下载目录拖到应用程序目录即可。

2. 安装Nuclide

Atom中,用图形化界面来安装。点击菜单栏:Atom->Preferences,然后,在Install Packets的输入框中,输入nuclide,出现的第一个就是我们想要安装的,点击install。

默认安装nuclide之后,还需要安装一大堆的依赖包,才可以安装完成。选中 Atom Packages->Settings View->Manage Packets -> Packages

然后搜索 nuclide, 在双击 nuclide Package 进入设置。勾选Install recommended packets on startup

退出Atom,再打开Atom,会发现Atom自动安装这些依赖包。在进入Atom可以看到,红色部分是额外的Toolbar可以快捷打开一些选项,小的红色框里多了一个nuclide选项。

3.创建项目

1)创建项目

安装好环境后,使用以下命令创建一个项目,并运行。

react-native init demo --verbose
cd demo 
react-native run-ios

启动完成后,你会看到React-Packger和iOS模拟器,具体的效果如下,说明你创建项目成功了。

2)项目改进

Xcode里面的代码目录结构暂时不用管了,打demo项目文件夹,找到index.ios.js文件。index.ios.js文件就是React-Native JS 的入口文件。 先来个感性的认识,修改一些文本。用文本编辑器Atom打开index.ios.js文件。

2.1)找到代码<Text></Text>部分:

<Text style={styles.welcome}>
      Welcome to React Native! 
</Text>

修改成如下:

<Text style={styles.welcome}>
      欢迎来到信平的小屋 
</Text>

2.2)找到代码:

  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10
  }

修改成如下:

  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color : 'red'
  }

按下commond+R 直接看效果,看看红色是否已经修改。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/4778.html

分享给朋友:

“React Native 开发之 (03) 用Atom作为React Native的开发IDE” 的相关文章

【Vue3 基础】05.组件化

这是 Vue3 + Vite + Pinia +TS + Element-Plus 实战系列文档。最近比较忙没什么时间写文章,争取早日把这个系列完结吧~生命周期和模板引用在本章之前,我们通过响应式 api 和声明式渲染,处理了 DOM 的更新,但光是这些,对于一些复杂的需要手动操作 DOM 的情况,...

美国民众负债累累 但今年假期消费者支出仍将创下新高

智通财经APP获悉,在迎接假期之际,许多美国人已经背负了创纪录的信用卡债务。然而,今年假期消费者支出仍将创下新高。根据美国零售联合会(NRF)上周发布的报告,预计今年11月1日至12月31日期间的消费总额将达到创纪录的9795亿至9890亿美元之间。NRF首席经济学家Jack Kleinhenz表示...

多项修正 尼康D4s发布最新1.10版固件

尼康公司与2014年8月27日发布了D4s的最新固件,固件版本号为C:1.10。这次固件升级,主要解决了一些BUG,并且对拍摄菜单与相机操作做了一定调整。下面是本次新固件的具体信息:尼康发布D4s最新C固件 1.10版对C固件升级到1.10版所作的修改:当选定运动VR模式并换上 AF-S 尼克尔 4...

三维家-系统快捷键使用

快键件使用:通过简单的键盘+鼠标操作,快速完成搭配。1.基础快捷键1) Ctrl+V:复制选中对象第一步:鼠标左击物体,按下Ctrl+V 即可复制选中对象。2) Ctrl+G:组合多选对象第一步:按住Ctrl键多选对象--按住Ctrl+G--确定。3) Ctrl+B:解组选中对象第一步:左击选中对象...

VUE 技术栈

官网链接:https://cn.vuejs.org/什么是vue:渐进式JavaScript 框架vue-cli链接:https://cli.vuejs.org/vue-cli安装:npm install -g @vue/clivue -V创建一个项目:vue create xxxxxx模版语法:文...

微信外H5跳转小程序——组件(vue项目)

场景有个H5(vue项目),需要实现点击商品item跳转到小程序,微信内和微信外都要支持,这里我们只介绍一下H5在微信外的跳转。如图所示,红框内是一个商品,就是点击这里,要跳转小程序:配置微信小程序云开发(云函数)1、开通云开发然后选择免费额度2、云开发权限设置找到权限设置,把这里的「未登录用户访问...