React-Native学习实践（一）

一、开发环境搭建（iOS-macOS）

       查看官方文档，在Mac下配置开发环境，个人采用的黑苹果，等react-native项目确定能跑之后再解决设备问题。

 ————前几天更换了MacBook Pro————

开发环境按照官方配置即可，大概30分钟即可，安装好node和npm，在命令行中执行：

$ npm -v

>>5.0.3

$ node -v

>>v8.1.3

————安装WebStorm并激活————

官网安装：WebStorm官网

激活码：WebStorm激活码

图0. 激活之后

二、部署环境并编写Hello World

        必要软件：Homebrew , Node , Yarn , React Native , Xcode

        推荐安装：Watchman , Flow , Nuclide

        测试安装： 

react-native init AwesomeProject     //创建新项目AwesomeProject

cd AwesomeProject                          

react-native run-ios                            //运行

         完成！

三、开发IDE配置

安装并激活WebStorm之后，可以通过File->New->Project 选择“react-native” 并修改项目名创建React-Native项目，选择执行Android or iOS：

图1. 执行平台选择

四、界面编写

通过修改index.ios.js中的代码，来修改界面。

界面分为_部分：

1.‘use strict’ 我也不懂，求指导

2. import  'component' from 'module'  导入模块中的某个组件 or import ‘component’ from ‘./path/fileName' 导入path路径下fileName中的某个模块，自己编写的小组件应用。

3.let var const 区别：const定义的变量不可以修改，而且必须初始化；var定义的变量可以修改，如果不初始化会输出undefined，不会报错；let是块级作用域，函数内部使用let定义后，对函数外部无影响； 

4.export default class ModuleName extends Component  

export default : 组件导出方式 在其他文件中可以使用import ModuleName from ‘./path/fileName‘导入组件供当前文件使用，详细介绍请看： 关于RN组件的导出export和export default

5.constructor 返回创建该对象的函数（构造函数）

6.render(){return ( {/*TODO your code*/} );}