从零开始搭建一个ReactNative项目

提前知识储备：

ReactNative中文网
React英文社区
ES6语法学习
React-Natigation官方文档
RN常用组件大全

1.环境搭建

这里就不过多阐述环境搭建的步骤了，RN官网写得非常详细，按照教程走就没什么问题了。

2.项目运行

1.安装node_modules,如果安装过跳过此步骤。

npm install

2.启动node本地服务

//下面三种方式随便选一种
npm start
react-native start
npm start --reset-cache //出现数据缓存问题需要重启服务时可使用

3.模拟器或真机运行

react-native run-ios --simualtor "iPhone X" //这里可以自选一个设备型号
react-native run-ios --device //这里需要插上真机

3.项目目录结构分析

项目目录结构.png

主要部分文件分析：
1. tests文件夹项目测试使用
2.android工程部分，修改原生配置时使用
3.ios工程部分，修改原生配置时使用
4.node_modules 整个项目所有依赖文件存放的地方，里面包含很多项目组建和命令工具。
5.index.js为项目入口文件，一般不做修改。
6.app.js为项目根视图文件，在这儿我们可以写有关界面相关的js代码。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import { Text, View } from 'react-native';

export default class App extends Component {
  render() {
    return (
        
          Hello, world!
        
    );
  }
}

7.项目主推ES6语法，采用React JSX语法来编写组件。
8.app.json。里面存放项目名称和app名称。
9.package.json。里面为项目中使用的环境依赖和组件依赖。

{
  "name": "hmap",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "@react-native-community/async-storage": "^1.2.4",
    "react": "16.8.3",
    "react-native": "0.59.2",
    "react-native-easy-toast": "^1.2.0",
    "react-native-gesture-handler": "^1.1.0",
    "react-native-scrollable-tab-view": "^0.10.0",
    "react-native-splash-screen": "^3.2.0",
    "react-native-storage": "^1.0.0",
    "react-navigation": "^3.6.0"
  }
}

4.导入常用组件

//具体导入方法，可以直接在github上面搜索相关组件的介绍
1.react-navigation  （强大的路由组件）
2.react-native-storage  (离线缓存组件)
3.react-native-splash-screen （启动图闪屏组件）
4.react-native-easy-toast (toast组件)

5.调试技巧

调试版面.png

1.IOS下模拟器打开调试面板，command+D.真机需要摇晃设备。
2.Android模拟器打开调试面板，command+M.
3.Show Perf Monitor 打开性能检测工具，查看实时fps.

6.打包命令

react-native bundle --entry-file index.js --bundle-output ./ios/bundle/index.ios.jsbundle --platform ios --assets-dest ./ios/bundle --dev false