移动端混合开发 (一)

2015年, Facebook 发布 React Native , 混合开发技术随之大热 . 2017年, Google 发布 Flutter, 欲与 RN 一争高下. RN 与 Flutter 熟好熟坏本文暂且不论, 感兴趣的同学可以去自行查找相关资料 . 本系列文章主要专注于如何使用 React Native快速构建移动端应用 .

环境搭建

关于 RN 的环境搭建, RN中文网已经给出了详细步骤, 不过有以下几点需要特别注意:

Mac环境下

最好有稳定的科学上网工具, 如果没有建议按照官网推荐的那样设置 npm 镜像 .

如果Mac系统版本在 10.11 以上,需要关闭系统的System Integrity Protection (SIP)系统完整性保护功能,否则会造成RN在安装过程中因为没有 /usr/local 等文件夹的读写权限而安装失败, 关闭SIP步骤如下:

重启Mac 同时按住 ⌘(command) 和 R 键不放, 直到系统进入 Recover 模式 依次点击 实用工具 -> Terminal (终端) 输入 csrutil disable , 按下回车键 (同样的步骤输入命令csrutil enable，即可重新打开SIP) 再次重启 Mac 重启完成后 /usr/local/ 目录便可以正常进行读写操作了

创建项目

如果你已顺利完成开发环境的搭建, 那么恭喜你, 你可以开始创建一个 React Native 项目了, 创建方式非常简单, 只需打开终端, 输入以下命令:

reatc-native init ReactDemo --version 0.57

按下回车, RN 便会自动帮你创建一个名为 ReactDemo 的工程, 当然你可以换成自己喜欢的工程名字, 后面的 --version 0.57 代表了你希望使用哪个RN版本, 当然也可以不指定版本, 这样RN会为你创建最新RN版本的工程.

运行项目

项目创建完成后, 接下来我们将项目运行起来看看效果. 在终端输入

cd ReactDemo react-native run-ios

等待项目加载完毕之后(第一次加载可能会比较慢), 我们便能看到在iOS模拟器上出现了一个名为 ReactDemo 的应用, 大概长这个样子

如果需要指定模拟器, 则输入

react-native run-ios --simulator "iPhone XS”

如果想要运行 Android 项目, 则必须先安装 Android 模拟器(或使用真机)并打开, 然后在终端输入下方命令即可

cd ReactDemo react-native run-android

项目运行起来后, 屏幕上出现了三行字, 看第二行: "To get started, edit App.js", 意为想要开始的话, 编辑App.js文件就可以了. 不过 App.js 文件在哪里呢? 还记得我们在运行工程的时候用过的这个命令吗?

cd ReactDemo

聪明的你一定猜到了, 没错, App.js 就在 ReactDemo 这个文件目录下, 我们用 Finder 打开这个目录, 可以看到 App.js 文件就在里面, 我们用开发工具打开这个文件(推荐使用 WebStorm 或者 IntelliJ IDEA 或者 FaceBook 提供的 Nuclide), 可以看到如下代码:

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button} from 'react-native';
import {Actions} from 'react-native-router-flux';
import {Alert} from "react-native";

const instructions = Platform.select({
  ios: 'Hello, iOS!',
  android: 'Hello, Android!',
});

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
复制代码

我们将 Platform.select() 函数的返回值修改了一下, 如果是 iOS 平台我们返回 "Hello, iOS!", 如果是 Android 平台我们返回 "Hello, Android!", 从运行结果来看, 不同的平台确实显示了不同的描述语句, 说明 React Native 确实帮助我们实现了跨平台开发.

本篇文章给大家梳理了 RN 开发的基础, 想要更进一步了解 RN 的用法和开发技术, 欢迎关注后续的博客更新哦~

转载于:https://juejin.im/post/5c2d7539f265da616d544d24