React Native 入门笔记

什么是React Native

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

传统开发痛点

  • 人员稀缺
  • 开发成本高
  • 代码复用率低
  • 无法动态更新

RN 优点

  • 跨平台
  • 低投入高回报
  • 性能高
  • 支持动态更新

开始开发

为了方便,我们先从Expo套件开发学起。

搭建环境

  1. 安装NodeJS
  2. 安装expo-cli.
    npm install expo-cli --global
  3. 创建项目
    expo init my-new-project
    cd my-new-project
    expo start
  4. 下载安卓expo app
  5. 打开APP预览效果
  6. 开始编写代码

Expo使用

在真机上,我们可以打开expo app 后进行摇一摇,打开debug 菜单。菜单功能包括:

  1. reload:重新加载js
  2. Debug:在chrome 浏览器远程调试。(wifi 调试需要保证在同一个局域网下)
  3. Toggle Inspector:
  4. Disable Fast Refresh
  5. show perf monitor

react-native 内置组件

SafeAraeView: 安全区域容器,保证避让刘海屏幕等的上方不规则部分。

StyleSheet:创建css 样式的对象。

Platform:判断os 的模块。

import {Platform, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  height: Platform.OS === 'ios' ? 200 : 100,
});

ScrollView: 滚动容器。

FlatList:列表渲染,传递有个数组渲染列表,并且只渲染可视范围内的元素。

TextInput: 文本输入。

Button:按钮

<Button
    onPress={this._onPressButton}
    title="Press Me"
    color="#841584"
/>

网络请求

使用fetch 发起请求即可。

async function getMoviesFromApi() {
  try {
    let response = await fetch(
      'https://facebook.github.io/react-native/movies.json',
    );
    let responseJson = await response.json();
    return responseJson.movies;
  } catch (error) {
    console.error(error);
  }
}

React Native还支持WebSockets,该协议可通过单个TCP连接提供全双工通信通道。

var ws = new WebSocket('ws://host.com/path');

ws.onopen = () => {
  // connection opened
  ws.send('something'); // send a message
};

ws.onmessage = (e) => {
  // a message was received
  console.log(e.data);
};

ws.onerror = (e) => {
  // an error occurred
  console.log(e.message);
};

ws.onclose = (e) => {
  // connection closed
  console.log(e.code, e.reason);
};

react-native cli 命令

react-native link 

相关第三方库或技术

react-navigation

flatlist

code push

官方组件

精选组件列表

开发工具

Nuclide是Facebook内部用于JavaScript开发的IDE。Nuclide的杀手级功能是其调试能力。它还具有强大的内联流程支持。VS Code是另一个受JavaScript开发人员欢迎的IDE。

Ignite是一个入门套件,它使用Redux和一些不同的通用UI库。它具有CLI来生成应用程序,组件和容器。如果您喜欢所有单独的技术选择,则Ignite可能非常适合您。

App Center是Microsoft的一项服务,可让您将实时更新部署到React Native应用程序。如果您不喜欢通过App Store流程来进行一些微调,并且也不想设置自己的后端,请尝试一下App Center

Expo是一个开发环境加应用程序,专注于让您在Expo开发环境中构建React Native应用程序,而无需接触Xcode或Android Studio。如果您希望React Native更具JavaScript和webby功能,请查看Expo。

Yoga是一个独立的布局引擎,它超越了React Native,允许产品工程师使用高度优化的开源布局引擎为多个平台快速构建布局,并考虑到速度,大小和易用性。

BugsnagMicrosoft App CenterSentry都为React和React Native应用程序提供了出色的崩溃和错误监视服务。这些服务使您可以主动主动监视崩溃和应用程序中发生的问题,以便您可以快速修复它们并改善用户体验。

Leave a Comment

电子邮件地址不会被公开。 必填项已用*标注