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 直接看效果,看看红色是否已经修改。