ReactNative开发环境配置，ES6语法介绍

Oragekk's Blog

OpenSpec 技术分享：用规格驱动 AI 编程 ChatGPT&Codex订阅教程一个 waline 评论系统bug引发的思考 Jenkins 远程触发构建踩坑记 Git SSH 密钥配置初识Rust vuepress-plugin-meting2 谷歌发布多平台应用开发神器Project IDX！PaLM 2加持 Vue常见优化手段 Vue2响应式原理解析 Dart 中的并发 Flutter 工作原理如何利用GitHub Action提交URL到搜索引擎提交URL到搜索引擎（百度、Bing、Google） GitHub Actions 使用介绍素材设计前端-Q&A 浏览器的事件循环你不知道的 CSS 之包含块 CSS 属性计算过程 Vercel deploy忽略指定分支评论插件 Waline 之邮件通知配置公开API 终端究极美化iTerm2+Pure 使用Bing API提交网站URL Flutter 基础大集合关于本站关于本站关于我 Markdown 展示使用n命令管理node版本幻灯片页 ReactNative State(状态) ReactNative介绍更优雅强大的终端ZSH 神经网络模型训练 YYCache优秀的缓存设计 WebViewJavascriptBridge NSError WCDB漫谈优雅的实现TableViewCell单选初探机器学习框架CoreML 深入理解swift中闭包的捕捉语义 ijkPlayer 集成 iOS 配置https iOS timelineLogistics iOS Cookie的配置及使用 WKWebView拦截URL WKWebView使用及自适应高度 textfield限制输入字符评论系统从多说迁移到disqus指南利用Runtime进行快速归档 iOS 10.3 keychain 重大更新 Cell的accessoryType属性标记单元格之后，出现的重用问题通过UserAgent判断设备 AFNetworking A memory leak 一人一句宋词 OC 中的枚举类型 iOS - Image compression algorithm iOS程序启动原理（下） iOS程序启动原理（上） NSOperatioin TableView性能优化 Runloop Test Three ways to call Update Cocoapods 1.1.1 减小iOS-App或者静态库体积 Jekyll旧站回忆 JavaScript ES6 CommonJS，RequireJS，SeaJS 归纳笔记 Unix/Linux 扫盲笔记

Oragekk · 2019-08-25 · via Oragekk's Blog

接上篇 ReactNative介绍

创建 ReactNative 项目

环境配置

yarn add --dev typescript
yarn add --dev react-native-typescript-transformer
yarn tsc --init --pretty --jsx react-native
touch rn-cli.config.js
yarn add --dev @types/react @types/react-native

配置 rn-cli.config.js

module.exports = {
  getTransformModulePath() {
    return require.resolve("react-native-typescript-transformer");
  },
  getSourceExts() {
    return ["ts", "tsx"];
  }
};

Create our new project

react-native init AwesomeProject

cd AwesomeProject react-native run-ios

项目结构图

my-app/
├─ .gitignore
├─ images.d.ts
├─ node_modules/
├─ public/
├─ src/
│  └─ ...
├─ package.json
├─ tsconfig.json
├─ tsconfig.prod.json
├─ tsconfig.test.json
└─ tslint.json

tsconfig.json 包含我们项目的 TypeScript 特定选项。
package.json 包含我们的依赖项，以及我们想要运行的命令的一些快捷方式，用于测试，预览和部署我们的应用程序。
public包含静态资产，例如我们计划部署到的 HTML 页面或图像。您可以删除此文件夹中的任何文件index.html。
src包含我们的 TypeScript 和 CSS 代码。index.tsx是我们文件的入口点，并且是强制性的。
images.d.ts将告诉 TypeScript 可以使用某些类型的图像文件import，create-react-app 支持这些文件。

添加 TypeScript 配置文件

我们想将 TypeScript 文件整合到一起 - 这包括我们写的源码和必要的声明文件。

我们需要创建一个tsconfig.json文件，它包含了输入文件列表以及编译选项。在工程根目录下新建文件tsconfig.json文件，添加以下内容：

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react"
  },
  "include": ["./src/**/*"]
}

你可以在这里了解更多关于tsconfig.json文件的说明。

运行

npm run start

npm run test

组件

示例代码

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

export default class HelloWorldApp extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Hello, world!</Text>
      </View>
    );
  }
}

示例中的这一行<View><Text>Hello world!</Text></View>恐怕很多人看起来也觉得陌生。这叫做 JSX——是一种在 JavaScript 中嵌入 XML 结构的语法。很多传统的应用框架会设计自有的模板语法，让你在结构标记中嵌入代码。React 反其道而行之，设计的 JSX 语法却是让你在代码中嵌入结构标记。初看起来，这种写法很像 web 上的 HTML，只不过使用的并不是 web 上常见的标签如<div>或是<span>等，这里我们使用的是 React Native 的组件。上面的示例代码中，使用的是内置的<Text>组件，它专门用来显示文本，而<View>就类似 html 中的div或是span这样的容器。

上面的代码定义了一个名为HelloWorldApp的新的组件（Component）。你在编写 React Native 应用时，肯定会写出很多新的组件。而一个 App 的最终界面，其实也就是各式各样的组件的组合。组件本身结构可以非常简单——唯一必须的就是在render方法中返回一些用于渲染结构的 JSX 语句。

Props（属性）

大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）。

以常见的基础组件Image为例，在创建一个图片时，可以传入一个名为source的 prop 来指定要显示的图片的地址，以及使用名为style的 prop 来控制其尺寸。

import React, { Component } from "react";
import { Image } from "react-native";

export default class Bananas extends Component {
  render() {
    let pic = {
      uri: "https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg",
    };
    return <Image source={pic} style={{ width: 193, height: 110 }} />;
  }
}

请注意{pic}外围有一层括号，我们需要用括号来把pic这个变量嵌入到 JSX 语句中。括号的意思是括号内部为一个 js 变量或表达式，需要执行后取值。因此我们可以把任意合法的 JavaScript 表达式通过括号嵌入到 JSX 语句中。

使用的时候像这样this.props，请注意一点，在自定义组件内部，由外部传入的 props 的属性均为**readonly（只读）**不可在组件内部修改

ES6 props 使用解构赋值

组件内部赋值是这样的

render() {
        return (
            <View style={style.ri_item}>
                <View style={style.ri_line}></View>
                {/* 中间部分 */}
                <View style={style.ri_item_center}>
                    <BidderView
                        bidderHeadImg={this.props.data.bidderHeadImg}
                        bidderName={this.props.data.bidderName}
                        targetName={this.props.data.targetName}
                    />
                </View>

                {/* 尾部按钮 */}
                <View style={{ flexDirection: "row", flex: 1, backgroundColor: "white", justifyContent: 'center', }}>
                    {this.recordOpinionButton()}
                    {this.recordButton()}
                </View>
            </View>
        );
    }

而使用解构赋值之后是这样的

render() {
        const {bidderHeadImg,bidderName,targetName}=this.props.data
        return (
            <View style={style.ri_item}>
                <View style={style.ri_line}></View>
                {/* 中间部分 */}
                <View style={style.ri_item_center}>
                    <BidderView
                        bidderHeadImg={bidderHeadImg}
                        bidderName={bidderName}
                        targetName={targetName}
                    />
                </View>

                {/* 尾部按钮 */}
                <View style={{ flexDirection: "row", flex: 1, backgroundColor: "white", justifyContent: 'center', }}>
                    {this.recordOpinionButton()}
                    {this.recordButton()}
                </View>
            </View>
        );
    }

ES6 延展操作符（...）

该运算符主要用于函数调用

function push(array, ...items) {
  array.push(...items);
}

function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers); // 42

对象的扩展运算

拷贝对象

对象的扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。

let z = { a: 3, b: 4 };
let n = { ...z };
n; // { a: 3, b: 4 }

合并对象

扩展运算符可以用于合并两个对象。

let ab = { ...a, ...b };
// 等同于
let ab = Object.assign({}, a, b);

用于 props，要求参数名一致，此处用法其实是对 copy 对象的一种应用

import React, { Component } from "react";
import { Image } from "react-native";

export default class Bananas extends Component {
  render() {
    let parameter = {
      uri: "https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg",
      title: "HelloWorld",
      message: "Nice to meet you",
    };
    return <ModalAlert {...parameter} />;
  }
}