美文网首页
React-Native学习实践(一)

React-Native学习实践(一)

作者: 向前Hell | 来源:发表于2017-07-16 23:02 被阅读0次

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

    相关文章

      网友评论

          本文标题:React-Native学习实践(一)

          本文链接:https://www.haomeiwen.com/subject/qqwgyttx.html