React Native学习笔记(1) 环境配置,项目结构,开发环境结构

概述

新接触 React Native,本文算是个笔记

环境配置

创建项目

环境配好后,就可以在命令行提示符下使用 react-native 指令了,下面是一些常用指令

创建项目

react-native init AwesomeProject   //AwesomeProject是项目名

启动 Node.js web server

react-native start

启动android

react-native run-android

启动ios

react-native run-ios

开发环境的组成

  • 一个node.js 的开发服务器,在开发阶段,我们的电脑上需要开启这个web服务,以使得在模拟器中可以显示内容。当我们更改了js源代码后,也能及时的在模拟器里看到。
  • 模拟器设备,就是我们开启的Android或者IOS虚拟机
  • jsBundle 开发者写的源代码打包而成,在开发阶段更改js文件会自动更新到模拟器。而在发布最终版的,我们需要手动打包(离线包)这个jsBundle到apk或者IOS安装包内。网上还有一些“热更新”的方案。
2044033-7f4bf87ce8e917d3.png
开发环境的组成

项目结构

2044033-7677acaf7ba1c9f4.png
项目结构图

如上图所示,我们看看项目文件下都有什么

  • android文件夹,这里是 android 工程的源代码,我们可以使用android studio 打开这个文件夹
  • ios文件夹,这里是 iso的项目工程的源代码,可以用xcode打开
    +node_modules ,是react-native工程用到的模块
  • index.android.js 是android的 页面的内容,主源代码文件
  • index.ios.js 是ios 的 页面的内容,主源代码文件
  • package.json 工程描述文件

启动应用

  1. 进到你的项目根目录,比如 cd AwesomeProject //AwesomeProject是项目名
  2. 在命令提示符输入: react-native start 启动服务
  3. 执行 react-native run-android 启动android ,稍等片刻就可以在Android模拟器里看到页面了
发布了256 篇原创文章 · 获赞 7 · 访问量 9万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览