一、开发环境搭建(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*/} );}
网友评论