使用VSCode开发React Native项目

一. 开发环境搭建 中文网站

• 原理
• 袁峥Seemygo
• 深入理解React Native页面构建渲染原理
• 知识库
• React Native 组件的生命周期
• CSDN
• 贾鹏辉的技术博客 → github
• 打包与热跟新
• React Native通信机制详解
• React Native 从入门到原理

打开reactnative项目：
方法一： 根目录npm start 之后打开ios项目 run
方法二：根目录react-native run-ios
方法三: VSCode 调试Debug ios

二. 插件

1. React Native Tools插件，支持代码高亮、debug以及代码提示等十分强大的功能

2. 代码智能提示

typings: 基于typescirpt的接口文件, 实现代码智能提示

• 安装typings:

npm install typings -g

• 安装React和react-native的接口说明文件：
  在项目根目录

typings install dt~react --save
typings install dt~react-native --save

3.文件目录补全

Path Intellisense

4. 语法高亮 babel

支持ES6、React.js、jsx代码语法高亮。
安装
command+shift+p -> install package -> babel
配置
该插件不需要额外配置，在打开.js或.jsx后缀的文件，直接选择Babel为对应的语法就可以了。
也可一劳永逸： 打开.js或.jsx后缀的文件 view -> Syntax -> open all with...->babel

5.插件推荐

为了开发的便捷，我还推荐以下插件：

• Auto Close Tag 自动闭合标签

• Auto Rename Tag 自动重命名标签，配合上面的插件使用，基本上能赶上IntelliJ IDEA系的功能了

• React-Native/React/Redux snippets for es6/es7 代码提示，如componentWillMount方法可以通过cwm直接获得

常用命令
npm i react-native-tab-navigator --save 安装库

三.知识点

• Platform设备信息 Platform.OS === 'ios'

返回不同的组件

var Component = Platform.select({
 ios: () => require('ComponentIOS'),
 android: () => require('ComponentAndroid'),
})();

style:

import { Platform, StyleSheet } from 'react-native';
var styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      ios: {
        backgroundColor: 'red',
      },
      android: {
        backgroundColor: 'blue',
      },
}),},});

• Navigator is deprecated and has been removed from this package.

 npm install --save react-navigation```

• npm start后 端口占用

 ERROR  Packager can't listen on port 8081
Most likely another process is already using this port
Run the following command to find out which process:
   lsof -i :8081 
Then, you can either shut down the other process:
   kill -9   //kill -9 11098

四. iOS和React Native之间相互调用