系统学习ReactNative

系统学习ReactNative --使用JavaScript和React编写原生移动应用

搭建Android所需开发环境 --安装依赖(node jdk Android Studio)

• 下载代码编辑器（webstorm,vscode）,Android Studio
• 安装node环境，按照官网的上的来，node的版本应大于等于 12
• 安装jdk(java运行所需环境),jdk的版本必须是 1.8
• 配置系统环境变量（分二种，jdk和andriod sdk）

配置jdk环境变量

1. 新建一个名为JAVA_HOME的环境变量,对应的值为安装jdk的路径，默认路径为C:\Program Files\Java\jdk1.8.0_77
2. 把jdk工具目录添加到环境变量 Path 中 %JAVA_HOME\bin%(结尾前后最好加上符号，如果你配置的jdk路径name值为 test ，而你在path环境变量的值为 %test%\bin)
   后面的bin是可保证能够执行jdk.exe

配置Android SDK环境变量

1. 安装Android SDK(Android Studio 默认会安装最新版本的 Android SDK,可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。
   找到Android SDK Platform 29选项勾选并点击apply。此时已在安装)
2. 新建一个名为ANDROID_HOME的环境变量,对应的值为安装andriod sdk的路径，默认路径为c:\Users\你的用户名\AppData\Local\Android\Sdk
3. 把一些常用工具目录添加到环境变量 Path 中

   %ANDROID_HOME%\platform-tools
   %ANDROID_HOME%\emulator
   %ANDROID_HOME%\tools
   %ANDROID_HOME%\tools\bin

结尾前后如果没有分号，需要加上。如果你配置的andriod sdk路径name值为 test ，而你在path环境变量的值为 %test%…

   自测jdk和Android SDK 是否已经安装并配置好相应的环境
   adb devices
   List of devices attached
   emulator-5554 offline   # Google emulator
   14ed2fcc device         # Physical device  
   执行 adb devices命令出现以上表现,说明你的设备已经被正确连接了,并且Android SDK配置成功
   
   javac -version
   javac 1.8.0_77
   执行 javac -version命令出现以上表现,说明jdk配置成功

运行ReactNative项目 --真机运行 (打开usb调试模式并允许usb下载应用)

• 全局安装ReactNative官方脚手架 react-native-cli
• 执行 npm react-native init AwesomeProject命令 初始化ReactNative项目
• 连接手机 执行 adb devices 命令
• 执行 react-native run-andriod 命令

注意，你每次只应当连接一个设备，如有多个设备，请干掉其他设备

ReactNative项目目录

 注：   --代表根目录  ---代表根目录下的子目录
 
  AwesomeProject  --项目根目录
    _tests_   ---测试文件夹，执行命令 “npm test”会调用此文件夹，在文件夹中需要引入待测试文件
    android  ---ReactNative项目对应的android代码  Android的原生开发目录，可以用Android Studio打开进行原生开发
    ios      ---ReactNative项目对应的ios代码      Ios的原生开发目录，可以用Xcode打开进行原生开发
 node_modules    --- 存放所有的项目依赖库，配置package.json之后执行“npm install”后自动创建的文件夹
 .babelrc    ---Babel的配置文件,Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行,babelrc用来设置转码规则和插件
 .buckconfig ---buck的配置文件，buck是Facebook推出的一款高效率的App项目构建工具
 .flowconfig --- Flow的配置文件，flowconfig是是Flow的配置文件 和typescript的很相似
 .gitattributes  --- git配置文件，指定非文本文件的对比合并方式
 .gitignore  ---git配置文件，用于忽略你不想提交到Git上的文件
 .watchmanconfig --- 用于监控bug文件和文件变化，并且可以出发指定的操作
  app.json  ---配置了name和displayName
  app  ---   react native js 代码目录,可以自己自定义视图组件目录,通用模块目录,工具类目录
  app.js  ---  React Native 源码，主要是存放入口组件 App 的源码
 index.js  ---ios或android的入口，但是老版本中可能使用index.ios.js/index.android.js，android中配置application文件的getJSMainModuleName()配置入口
 index.android.js --- 在 android 设备上运行时的入口文件
 index.ios.js    ---在 ios 设备上运行时的入口文件   
 package.json   --- npm 的包管理文件 项目基本信息以及依赖信息