[TOC]

跳转指定位置

ReactNative详解生命周期

前言

• 1、数据变化怎么通知React(以按钮更新文本为例)

常用的通知React数据变化的方法是调用setState(data,callback)，这个方法会合并data到this.state，并重新渲染组件。渲染完成后，调用可选的callback回调。大部分情况不需要提供callback，因为React会负责吧界面更新到最新状态。

详情查看：附一：StateEasyPage.js 与 StateNormalPage.js

• 2、怎么给组件添加属性、设置默认值，并对默认值设置类型检查

一、了解state作用

1、this.setState({xxx:’’}) 与 this.state.xxx=’’

所以，自定义组件的时候，因为其需要传的参数是会被变化的，所以，我们在自定义组件中，不能使用state来更新，而是自定义组件中使用props，结合外部调用它的来处理。

2、认识state原理

2.1、this.setState({})

this.setState({})会触发render方法，重新渲染界面。而this.state.xxx=’’ 不会重新加载UI。

this.setState({})是异步的

三、类型判断

参考文章：

• js 判断数据类型的几种方法

附

附一：StateEasyPage.js 与 StateNormalPage.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

//StateEasyPage.js
import React, { Component } from 'react';
import { View, Button, Text } from 'react-native';

export default class StateEasyPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showText:	"旧标题"
        };
    }

    render() {
        return (
            <View>
                <Button
                    title={"点击切换标题"}
                    onPress={()=>{
                        this.setState({
                            showText: "新标题"
                        })
                    }}
                />
                <Text>{this.state.showText}</Text>
            </View>
        )
    }
}

丰富一下，使其可以来回切换：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

//StateNormalPage.js
import React, { Component } from 'react';
import { View, Button, Text } from 'react-native';

export default class StateNormalPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showText:	"旧标题",
            isShowNew: false
        };
    }

    render() {
        let currentShowText = this.state.isShowNew ? "新标题" : "旧标题"

        return (
            <View>
                <Button
                    title={"点击切换标题"}
                    onPress={()=>{
                        let isShowNew = !this.state.isShowNew;
                        this.setState({
                            isShowNew: isShowNew
                        })
                    }}
                />
                <Text>{currentShowText}</Text>
            </View>
        )
    }
}

[TOC]

ReactNative使用技巧

前言

一、布局

默认情况下，使用position: 'absolute'后，后面的元素会默认覆盖在前面的元素之上。

二、Text

1、[style]Android上Text默认的字体颜色，不是black，不是black，不是black

如果在Android上面，不显示地给Text添加color，那么显示出来的字体颜色就是灰色。跟iOS的表现不一致；
解决方案：
方案一：给每个Text都设置color

不足：每次都设置color。比较繁琐

方案二：写一个自定义组件

比如MyText，这个Text设置颜色，每次使用xxx就默认为你设置的颜色了。
不足：多出来了一个新的组件，也比较繁琐。
多出来了一个新的组件，也比较繁琐。

方案三：设置默认props

在入口文件里面写上默认的style，比如：
Text.defaultProps.sytle = { 'color': '#212121'}

[TOC]

ReactNative私有库

私有库

路径及执行的写法

npmjs库的发布详情查看：代码管理/库管理/npmjs/npmjs的发布

[TOC]

ReactNative组件的封装

参考文章：

• es6 Class 的继承
• (重要)react-native之Button组件及自定义

• (重要)React-Native 自定义按钮系列

• React Native (三)： 自定义视图

很多用React Native的同学都是前端工程师，在传统的js没有继承的概念。但是在react Native所支持的es6是有继承的，效果也是不错的。

[TOC]

ReactNative的继承重写等

参考文章：

• es6 Class 的继承

1、问：怎么将页面的导航栏设置navigationOptions封装起来，使得子类可以只设置一个navigationOptions中的title值。

• 子类能否重写父类的静态方法(答：不能)
• 在 static方法内部调用外部非静态方法

2、问：怎么在当前页面改变导航栏标题

3、怎么根据前一个页面的值动态更改导航栏标题

参考：

• React Native之react-navigation动态修改标题、页面导航等
• React Navigation参数传递动态修改navigationOptions->title

很多用React Native的同学都是前端工程师，在传统的js没有继承的概念。但是在react Native所支持的es6是有继承的，效果也是不错的。

[TOC]

ReactNative的继承重写等

参考文章：

• es6 Class 的继承

1、问：怎么将页面的导航栏设置navigationOptions封装起来，使得子类可以只设置一个navigationOptions中的title值。

• 子类能否重写父类的静态方法(答：不能)
• 在 static方法内部调用外部非静态方法

2、问：怎么在当前页面改变导航栏标题

3、怎么根据前一个页面的值动态更改导航栏标题

参考：

• React Native之react-navigation动态修改标题、页面导航等
• React Navigation参数传递动态修改navigationOptions->title

很多用React Native的同学都是前端工程师，在传统的js没有继承的概念。但是在react Native所支持的es6是有继承的，效果也是不错的。

一、资源文件的显示

创建md的同名文件夹后，资源文件的路径不能写为./xxx/1.jpg(虽然markdown有效)，只能为xxx/1.jpg。

其他参考：hexo官网：资源文件夹

二、hexo链接的持久化

参考文档：

永久链接（Permalinks）的官网文档：https://hexo.io/zh-cn/docs/permalinks.html

hexo链接持久化终极解决之道：https://blog.csdn.net/yanzi1225627/article/details/77761488?utm_source=blogxgwz4

1、背景

大家知道hexo默认的链接是http://xxx.yy.com/2018/12/14/hello-world 这种类型的，这源于站点目录下的配置_config.yml里的配置:permalink: :year/:month/:day/:title/，所以，我们当我们在浏览器中浏览的时候，其地址实际上为如上所述。因而我们在处理链接跳转的时候，就也得跟着加上这部分前缀了。

2、链接优化

由于上诉中的日期前缀部分通常容易变化，所以为了我们的链接持久化，我们需要将其去掉，即我们在_config.yml中做如下修改：

1
2

# permalink: :year/:month/:day/:title/
permalink: :title/

此时网页链接写法

设文件《1Hexo的使用.md》和《2Hexo的进阶.md》处于同级目录下，则

当你在《1Hexo的使用.md》的时候想要链接进《2Hexo的进阶.md》的时候，

平时在markdown中的写法：./2Hexo的进阶.md

现在在Hexo网页中的写法1：../2Hexo的进阶

*现在在Hexo网页中的写法2：/文档管理/Hexo/2Hexo的进阶（因为根目录为/）

附：如果你想保持.md后缀，可将上诉改为

1
2

# permalink: :year/:month/:day/:title/
permalink: :title/.md

三、修改博客文章顺序/解决置顶问题

Hexo默认只提供了按发布日期的排序。

原理：在Hexo生成首页HTML时，将top值高的文章排在前面，达到置顶功能。

怎么置顶：每篇文章增加一个属性top，普通文章设置值为1，置顶文章设置为1以上。

1
2
3
4
5
6
7

title: Hexo增加置顶属性
date: 2018-09-14 14:57:57
top: 1
tags:
  - 博客
  - Hexo
  - 置顶

生成首页的是扩展插件node_modules/hexo-generator-index中。所以修改Hexo文件夹下的node_modules/hexo-generator-index/lib/generator.js，在生成文章之前进行文章top值排序。

最终的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

'use strict';

var pagination = require('hexo-pagination');

module.exports = function(locals) {
  var config = this.config;
  var posts = locals.posts.sort(config.index_generator.order_by);

  // >>>>>>> 添加以下内容，实现置顶功能 >>>>>>>>
  posts.data = posts.data.sort(function(a, b) {
    if(a.top && b.top) {
        if(a.top == b.top) return b.date - a.date;
        else return b.top - a.top;
    }
    else if(a.top && !b.top) {
        return -1;
    }
    else if(!a.top && b.top) {
        return 1;
    }
    else return b.date - a.date;
  });
  // <<<<<<<< 添加以上内容，实现置顶功能 <<<<<<<<
  
  var paginationDir = config.pagination_dir || 'page';
  var path = config.index_generator.path || '';

  return pagination(path, posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

四、让部分文件不显示在feed中

想让以下文件不在feed中显示，但又不影响其网页地址的访问。

1
2
3
4
5
6
7
8
9

source/_posts/Architecture架构/框架相关/WebView相关/h5_native_interacte/h5js/dvlp_h5js_demo_hardware.json
source/_posts/Architecture架构/框架相关/WebView相关/h5_native_interacte/h5_open_app/dvlp_h5_open_app_app_route_url_demo.html


http://localhost:4000
https://dvlproad.github.io

https://dvlproad.github.io/Architecture架构/框架相关/WebView相关/h5_native_interacte/h5js/dvlp_h5js_demo_hardware.json
https://dvlproad.github.io/Architecture架构/框架相关/WebView相关/h5_native_interacte/h5_open_app/dvlp_h5_open_app_app_route_url_demo.html

要确保特定的 .json 文件不被Hexo渲染并出现在feed中，你可以使用 skip_render 配置项。这个配置项告诉Hexo忽略指定的文件或文件夹，直接将它们复制到 public 目录中，而不进行任何处理。

根据你希望排除的文件路径，你应该在Hexo的配置文件 _config.yml 中添加如下配置：

1
2

skip_render:
  - '_posts/Architecture架构/框架相关/WebView相关/h5_native_interacte/h5js/dvlp_h5js_demo_hardware.json'

这行配置会确保 dvlp_h5js_demo_hardware.json 文件不会被Hexo渲染，并且不会出现在生成的feed中。请注意，路径是相对于 source 目录的，并且不以斜杠 / 开头。

完成配置后，为了确保更改生效，你需要执行以下命令来清除Hexo的缓存并重新生成站点：

1
2

hexo clean
hexo generate

使用 skip_render 配置项是处理这种情况的推荐方法，因为它可以精确控制哪些文件不应该被Hexo处理。这样，你就可以确保只有你希望被渲染的文件才会出现在最终的站点中。

四、其他

其他参考文章：hexo+github博客搭建，hexo目录，hexo设置详解

参考文章

• 官网 https://hexo.io/zh-cn/docs/index.html

• 基于hexo+github搭建一个独立博客

前言：新电脑上的使用

1、终端执行 hexo -v，检查是否安装过hexo，且安装成功

如果已安装 hexo，则终端执行 hexo -v能够显示结果

2、node建议安装 v12.19.0版本，否则会出现如下常见错误1

2、查看项目目录下是否已存在由在该目录下执行npm install命令后生成的 node_modules 文件夹

如果不存在，则无法执行，请通过以下命令在该项目目录下生成 node_modules 文件夹

1
2

cd 到项目目录
npm install

若已存在，则通过以下命令，即可生成本地网络路径

1
2

cd 到项目目录
hexo s

常见错误1、hexo部署到github时，提示typeError [ERR_INVALID_ARG_TYPE] The “mode“ argument must be integer. Receive

原因：node版本过高导致的。

解决方法：使用 12.19.0 版本的时候，可以部署成功。版本的安装命令如下：

1

sudo n v12.19.0

PS：node指定版本的安装、切换、删除 请进入本博客中的 node 查看

参考文章：hexo部署到github时，提示typeError ERR_INVALID_ARG_TYPE The “mode“ argument must be integer. Receive

一、主要命令

上述配置发布地址(在_config.yml中完善)

1
2
3
4

deploy:
type: git
repository: https://github.com/dvlproad/dvlproad.github.io.git
branch: master

二、常用的创建

三、常用的主题

Hexo主题：https://hexo.io/themes/

目前尝试过的主题有：BlueLake、

四、发布容易遇到的问题

1、首先肯定是我们的文件夹中有文档存在问题？那怎么确认是哪个文档问题呢？

答：我们通过排除法。先把可能的文件夹都移到项目外，然后执行 hexo -g 看是否还是异常。直到 hexo -g 正常，即可找到问题文件夹和文件。

2、至于是该文件/文档中的哪部分出现问题了。怎么排查？

答：依然还是可以用排除法。先把该文档可能的文案移除，然后执行 hexo -g 看是否还是异常。直到 hexo -g 正常，即可找到问题出现在哪个段落，甚至是哪一行。

3、如何该行中的哪个内容出现问题？

答：点击查看 https://hexo.io/docs/troubleshooting.html，其描述的是

即我们的文档中使用大括号后加特殊字符的格式时候，有特殊字符未配对。可能是多余了，也可能是少了。经如下修复后，运行正常。

点击此处，进入下一节的正式学习 >

本章介绍

• ①Hexo的使用
• ②Hexo的进阶

点击此处，进入本章第1节的正式学习 >

[toc]

阿里云服务器ECS域名绑定

一、注册域名

1、几个阿里云域名注册的网址

• 域名：https://wanwang.aliyun.com

• 域名特惠专场：https://www.aliyun.com/activity/daily/yumingtehui

• 一元域名：https://wanwang.aliyun.com/domain/1yuan

二、域名解析/绑定

其他参考：阿里云域名和ip绑定步骤

之后，通过在浏览器地址栏输入 goapi.work，其都会自动帮我们加上www前缀。

同时，即使IP地址的格式中带需要有端口，如：202.106.0.20:8080，也只添加202.106.0.20即可。

访问的时候，因为我们的ip地址需要带端口，所以访问的时候需要多填个端口。如 http://www.goapi.work:3000 访问

End

至此，利用阿里云服务器ECS的使用介绍结束。