它是⼀个基于⼆维码建立连接的基础通讯设施。你可以在它的基础上去建⽴各种交互，它默认的交互协议都是与以太坊的交互。当然你也可以做能够想象到的各种事，可以不只局限于 Dapp 通讯交互，如果你把默认的以太坊协议改掉，也意味着你将与其他⽀持 WalletConnect 钱包、Dapp 脱离关系，互不兼容。

现在出现了很多针对电脑这种大屏幕的 Dapp 应用，在 WalletConnect 没有出现之前，必须使用Chrome 插件或者桌面端钱包来授权操作，这让原本使用移动端钱包的用户操作和使用习惯出现了割裂感，还需另外操作下载插件或钱包，再将私钥导⼊进去。

02 WalletConnect 消息通讯工作原理

WalletConnect 建立连接原理

Topic 名词解释：文本意思为“主题”，在 WalletConnect 中钱包端与 Dapp 端各有⼀个 Topic 主题，让对方订阅，这样就形成了⼀个可以相互通信的通道。

1. Dapp 端与中继服务器建立 Socket 连接；

2. Dapp 端⽣成 Dapp ClientID（监听该 Topic 会得到发送给 Dapp 的消息），Dapp Topic（监听该Topic 会得到 Dapp 发出的登陆请求），并订阅 Dapp ClientID；

3. Dapp 端向中继服务器发送 Topic 为 Dapp Topic 的信息，并携带 Dapp ClientID 信息；

4. Dapp 端展示⼆维码包含 Dapp Topic 信息，中继服务器的地址，密码；

5. 钱包端扫描 Dapp 端的⼆维码，解析出⼆维码信息获得 Dapp Topic，中继服务器地址，密码；

6. 钱包端与中继服务器建立socket 连接，然后产生 Wallet PeerID（监听该 Topic 可以获得发送给钱包端的消息），并订阅 Dapp Topic 和 Wallet PeerID ；

7. 接下来钱包端将接收到中继服务器转发过来的 Dapp 的登陆请求；

8. 钱包端处理是否同意 Dapp 的登陆，发送 Topic 为 Dapp ClientID 的消息，并把处理结果和Wallet PeerID 的信息传递回去；

9. 此时连接建立成功，如果「Dapp」想给「钱包端」发送消息，则发送 Topic 为 Wallet PeerID 的信息即可；

10. 如果「钱包端」想给「Dapp」发送消息，则发送 Topic 为 Dapp ClientID 的信息即可。

钱包端 Topic 和 Dapp 端 Topic 两方共同组成了 Session。

WalletConnect 的 Session 生命周期才是 Dapp 与钱包双方建立的连接的生命周期，WebSocket 只是它的“通讯⼯具”，WebSocket 的断开不代表此次与钱包的连接断开。

03 WalletConnect 通讯工作原理

WalletConnect 只是⼀套通讯协议，双⽅通信什么信息都可以； WalletConnect 默认通过 WebHook 的⽅式来⽀持推送服务，你可以在⼿机 App 没有打开的情况下来通知⽤户处理信息； 如果有⼀方 A 断开 Socket 连接，另⼀⽅ B 发送消息会暂存在中继服务中，当下⼀次 A 与中继服务器建⽴ Socket 连接，并订阅相关的 Topic，才会将中继服务暂存的消息发送给 A。

04 WalletConnect 消息安全如何保障

使用 AES-256 对称加密来加密通讯的信息，HMAC-SHA256 做 Hash 签名； Dapp 端⽣成的⼆维码中包含对称加密的密码，⼿机端扫描该⼆维码获得密码，所以 Dapp ⼆维码不会过网传递。

05 WalletConnect 如何快速接入推送

底层做支持的技术 WebHook

WebHook 是⼀种 HTTP 回调：某些条件下触发的 HTTP POST 请求； WalletConnect 的中继服务中也有这个接受 WebHook URL 的 API 接⼝； WalletConnect 单独提供了 Firebase 推送服务。

1. 消息接收方将⼀个 URL 和想接收的消息发送给消息发送⽅；

2. 消息发送方达成⼀定的条件，就会去调⽤ 消息接收⽅的 URL，来通知消息接收方接收消息。

WalletConnect 推送使⽤流程

1. ⼿机端收到 Dapp 的登陆请求，⼿机端如果同意登陆请求，可以使⽤ Topic Dapp ClientID 和Firebase ID 向「推送服务」订阅消息；

2. 「推送服务」收到 Topic 会继续向「中继服务」发送 WebHook 订阅 Topic；

3. 如果「中继服务器」发现「推送服务」订阅的 Topic 有信息，它就会通知「推送服务」；

4. 「推送服务」找到订阅相关 Topic 的 fitebase ID 发起推送。

06 总结

WalletConnect 是⼀种通过扫描 QR 码使⽤端到端加密技术将桌⾯ DApp 连接到移动设备的开放性协议。它开启了整个曾经只有Metamask 钱包可⽤的 DApps 世界。⽤户可以在不损害其私钥安全的情况下与任何 DApp 交互，并能在其移动设备上收到通知，签字同意任何交易请求。

本文链接：https://www.8btc.com/media/642335 转载请注明文章出处

等待安装完成，我们就可以使用tree命令了。 首先使用tree --help查看帮助，所有的用法都在里面。

下面介绍两个常用的用法。

在目录遍历时使用 -L 参数指定遍历层级

% tree -L 1
.
├── dist
├── node_modules
├── package.json
├── src
├── webpack.config.js
└── yarn.lock

把一个目录的结构树导出到文件 Readme.md ,可以使用tree -L 2 >README.md，打开README.md 可以在markdown中编辑。

其他的方法还有:

curl icanhazip.com  
curl ifconfig.me  
curl curlmyip.com  
curl ip.appspot.com  
curl ipinfo.io/ip  
curl ipecho.net/plain  
curl www.trackip.net/i  

使用 Go 语言的小伙伴们应该也对 Go语言官网 被墙感到苦恼，很多文档和第三方包还得通过一些第三方渠道获得；尤其是 golang.org/x 使用广泛，但是被墙了。。。

Go 在 1.11 版本中放出了 mod 管理机制，在涉及到 第三方库 和 第三方库里用 golang.org/x 的时候，真是让人不爽。。。

下面来介绍一下 GOPROXY 方式去正常使用这些工具。

PS：可以翻墙的小伙伴可以略过所有内容。

一、传统非代理方式解决第三方包问题 go mod 提供了 replace 方式来指定替换包的地址；当然，如果第三方包中引用墙外的包，就需要手动修改他们了，不如代理方式方便；

使用方式如下：

module github.com/exercise

require (
    golang.org/x/text v0.3.0
    gopkg.in/yaml.v2 v2.1.0 
)

replace (
    golang.org/x/text => github.com/golang/text v0.3.0
)

二、GOPROXY的两个地址

主要有两个地址：

• https://goproxy.io

• https://athens.azurefd.net

根据个人喜好随意选择吧。

1、goproxy.io

官网

原理图

2、Athens

官网

三、GoLand设置

1. 路径：GoLand —> Perferences —> Go —> Go Modules（vgo）—> Proxy；

2. 设置上面给出的地址；

3. 重启即可使用；

四、命令行设置环境变量

此处以 Mac为例，给出示例图片；

只要 export 加入到 环境变量里，一些墙外的第三方包就可以正常获取到了；

windows系统的设置方法可以看 goproxy.io 的设置文档；

~ $ export GOPROXY=https://goproxy.io
~ $ echo $GOPROXY
https://goproxy.io

原文链接：https://blog.csdn.net/tmt123421/article/details/88665248

例如，当你的应用暂时放到了后台，是否应该做出一些操作，暂时保存界面上的数据？

可以参考：https://github.com/wix/react-native-navigation/issues/839

官方文档：https://facebook.github.io/react-native/docs/appstate.html

官方示例代码：

import React, {Component} from 'react'
import {AppState, Text} from 'react-native'

class AppStateExample extends Component {

  state = {
    appState: AppState.currentState
  }

  componentDidMount() {
    AppState.addEventListener('change', this._handleAppStateChange);
  }

  componentWillUnmount() {
    AppState.removeEventListener('change', this._handleAppStateChange);
  }

  _handleAppStateChange = (nextAppState) => {
    if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
      console.log('App has come to the foreground!')
    }
    this.setState({appState: nextAppState});
  }

  render() {
    return (
      <Text>Current state is: {this.state.appState}</Text>
    );
  }
}

做法是：引用AppState

import { AppState } from 'react-native';

在组件的componentDidMount事件中，增加以下代码

componentDidMount() {
        console.log('componentDidMount================');
        AppState.addEventListener('change', (state) => {
            if (state === 'active') {
                console.log('state active');
            } else if (state === 'background') {
                console.log('background');
            } else if (state === 'inactive') {
                console.log('inactive');
            }
        });
    }

App States active - 该应用程序在前台运行 background - 该应用程序正在后台运行。用户是： 在另一个应用中 在主屏幕上 [Android]在另一个Activity（即使它是由您的应用程序启动） inactive - 这是在前景和背景之间转换时以及在处于非活动状态期间发生的状态，例如进入多任务处理视图或来电时

import React, { Component } from 'react';
import {
  ToastAndroid,
  AppState,
  BackHandler,
  TouchableHighlight,
  Platform,
  StyleSheet,
  Text,
  View,
  Alert
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});


const lastBackPressed = Date.now();

type State = {
  test: string,
};

export default class App extends Component<Props,State>{

constructor(props: Props){
  super(props);
  this.state = {
    test: "hello",
  };
}

  //组件加载之后添加监听
  componentDidMount() {
    if(Platform.OS === 'android') BackHandler.addEventListener('hardwareBackPress', this._onBackPressed);
    AppState.addEventListener('change', this._onAppStateChanged);
  }

  //组件卸载之前移除监听
  componentWillUnmount() {
    if(Platform.OS === 'android') BackHandler.removeEventListener('hardwareBackPress', this._onBackPressed);
    AppState.removeEventListener('change', this._onAppStateChanged);
  }

  _onBackPressed() {
    if (lastBackPressed && lastBackPressed + 2000 >= Date.now()) {
        BackHandler.exitApp();
      }
      lastBackPressed = Date.now();
      ToastAndroid.show('再按一次退出应用', ToastAndroid.SHORT);
      return true;
  }

  _onAppStateChanged() {
    switch (AppState.currentState) {
      case "active":
        console.log("active");
        break;
      case "background":
        console.log("background");
        break;
      default:

    }
  }
  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>
        <TouchableHighlight onPress={
                ()=> {
                    this.setState({test: "aaaa"});
                }
            }>
                <Text>{this.state.test}</Text>
            </TouchableHighlight>
        <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,
  },
});

官方API里面只有复制到剪贴板和从剪贴板读取内容的两个方法：

static getString()

获取剪贴板的文本内容，返回一个Promise语句。

static setString(content: string)

设置剪贴板的文本内容。你可以用下面的方式来调用。

import React from 'react'
import PropTypes from 'prop-types'
import {
    View,
    Text,
    TouchableWithoutFeedback,
    Clipboard,
} from 'react-native'

export default class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            text:'我是文本'
        }
    }
    async copy(){
        Clipboard.setString(this.state.text);
        let  str = await Clipboard.getString()；
        console.log(str)//我是文本
    }
    render() {
        const { text } = this.state;
        return(
              <View>
                  <Text>{text}</Text>
                  <TouchableWithoutFeedback onPress={this.copy.bind(this)}>
                      <View>
                          <Text>点击复制到剪贴板</Text>
                      </View>
                  </TouchableWithoutFeedback>
              </View>
        )
    }
}

目前暂时只支持复制文本和读取文本，实际应用中，我们可能希望能够部分复制，即类似复制从某个位置到某个位置的文本，这个操作如果后续看到的话，我会添加在这后面。

这里介绍对go项目进行打包编译生成可执行文件，其实包含参数的传递、目标可执行文件类型、打包对象。

二、使用

go项目的编译命令为go build，编译包，生成可执行文件(包含main包),默认生成位置在当前目录下。 (注意不能生成包文件)。如下：

go build
参数有：
-ldflags：用于编译时设置变量值
-o：指定编译生成的目标文件名
-v:编译时显示包名

另外编译预设变量：
GOOS:指定编译生成可执行文件的运行系统，常用的有：windows、linux、darwin
GOARCH:指定编译生成可执行文件的运行系统架构，常用的有：amd64、arm

其中参数传递-ldflags的二级参数为：

-X:设置包中的变量值
-s:去掉符号表，异常时没有文件名或行号信息
-w:去掉DWARF调试信息

三、示例

3.1 带参数编译

3.1.1 目标go文件

这里目标go文件param_main.go我放在with_param目录下。

package main
import "fmt"

//参数定义，由外部传值
var (
   Env string
   Version string
)
func main() {
   fmt.Printf("Env:%s Version:%s \n", Env, Version)
}

GOOS=darwin GOARCH=amd64 go build  -o "with_param/param_main" -ldflags "-w -s -X main.Env=test -X main.Version=1.0" with_param/param_main.go

运行编译命令后，后成可执行文件param_main，执行文件后，输出：

Env:test Version:1.0 

3.2 多文件编译

在multi目录下新建目标go文件hello.go和multi_main.go，如下：

package main
func DoHello(name string) {
   println("hello " + name)
}

package main
func main() {
   println("execute main")
   DoHello("apple")
}

GOOS=darwin GOARCH=amd64 go build  -o "multi/multi_main"  multi/multi_main.go multi/hello.go

运行编译命令后，后成可执行文件multi_main，执行文件后，输出：

execute main
hello apple

3.3 go项目编译

go项目编译直接在项目根目录下编译即可(不需要单独指定编译目录)，如：

GOOS=darwin GOARCH=amd64 go build  -o "targte_exe" -ldflags "-w -s -X main.Env=test -X main.Version=1.0"

四、其它 4.1 go install 除了使用go build编译外，还可以使用go install，直接生成库。

编译包文件(没有main包)后，编译的包放到pkg目录下($GOPATH/pkg) 生成可执行文件(有main包)后，可执行文件放到bin目录下($GOPATH/bin)

原文链接：https://blog.csdn.net/chinabestchina/article/details/109414739

在一般的手机App中，HTTP请求是一种最常见的获取数据的方式。我们的App要连上广阔的互联网，才能带来一个丰富的世界。那么，在React Native中如何发起HTTP请求呢？

发起网络请求

要从任意地址获取内容的话，只需简单地将网址作为参数传递给fetch方法即可（fetch这个词本身也就是获取的意思）：

fetch('https://mywebsite.com/mydata.json')

Fetch还有可选的第二个参数，可以用来定制HTTP请求一些参数。你可以指定header参数，或是指定使用POST方法，又或是提交数据等等，具体方法可以参考文档。

在这里，我们封装一个极简的get请求：

var HttpClient={
    requestAsync:function(url , callback){
      fetch(url)
      .then((response) => response.json() )
      .then((responseJson)=>{
        callback.call(this,responseJson);
      })
      .catch((error)=>{
        console.error(error);
      });
    }

}

export default HttpClient;

这个方法非常简单，我们只设计了两个形参（url和回调）。整个fetch方法，十分类似函数式编程的模式。

一个例子

需求

请求https://facebook.github.io/react-native/movies.json获得它的title字段的信息并显示出来。

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View,

} from 'react-native';

import HttpClient from '../AwesomeProject/App/widget/HttpClient'

class HelloWorld extends Component {
  render(){
    return (
      <Text>{this.state.title}</Text>
    )
  }

  constructor(props) {
    super(props);
    this.state={
      title:'loading',
    };
    var self = this;
    var httpUrl = 'https://facebook.github.io/react-native/movies.json';
    HttpClient.requestAsync(httpUrl , function(responseJson){
      self.setState({
        title:responseJson.title,
        movies:responseJson.movies,
      })
    });
  }
}


AppRegistry.registerComponent('AwesomeProject', () => HelloWorld);

这里我们运用了上一节的state的知识。在HelloWorld的初始化时，我们将this.state.title设为loading。然后在HTTP请求的回调中，将responseJson中的title取出，存入this.state.title中。

由于this.state的值发生改变，render方法会被重新调用。此时this.state.title中的值已经是我们请求回来的数据了，即可渲染成功。

**1.**init 的时候，卡在了cocoapods安装这一步。

解决办法：

 gem list

把所有涉及到cocoapods的全部uninstall卸载掉

sudo gem uninstall cocoapods -v 1.7.5

sudo gem uninstall cocoapods-xxx

.......

重启mac

最好打开翻墙

然后重新react-native init xxx

估计40分钟-1小时之后跑完

报了一个错会提示‘cd ios && pod install’

这个时候直接cd到xxx执行

cd ios && pod install

虽然执行完成但是installing DoubleConversion的时候又报了一个错

我又重新执行cd ios && pod install

React的生命周期从广义上分为三个阶段：挂载、渲染、卸载

因此可以把React的生命周期分为两类：挂载卸载过程和更新过程。 React的生命周期图:

1. 挂载卸载过程

1.1.constructor()

constructor()中完成了React数据的初始化，它接受两个参数：props和context，当想在函数内部使用这两个参数时，需使用super()传入这两个参数。 注意：只要使用了constructor()就必须写super(),否则会导致this指向错误。

1.2.componentWillMount()

componentWillMount()一般用的比较少，它更多的是在服务端渲染时使用。它代表的过程是组件已经经历了constructor()初始化数据后，但是还未渲染DOM时。

1.3.componentDidMount()

组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染

1.4.componentWillUnmount ()

在此处完成组件的卸载和数据的销毁。

1. clear你在组建中所有的setTimeout,setInterval

2. 移除所有组建中的监听 removeEventListener

3. 有时候我们会碰到这个warning:

Can only update a mounted or mounting component. This usually      means you called setState() on an unmounted component. This is a   no-op. Please check the code for the undefined component.

原因：因为你在组件中的ajax请求返回setState,而你组件销毁的时候，请求还未完成，因此会报warning 解决方法：

componentDidMount() {
    this.isMount === true
    axios.post().then((res) => {
    this.isMount && this.setState({   // 增加条件ismount为true时
      aaa:res
    })
})
}
componentWillUnmount() {
    this.isMount === false
}

2. 更新过程

2.1. componentWillReceiveProps (nextProps)

1. 在接受父组件改变后的props需要重新渲染组件时用到的比较多

2. 接受一个参数nextProps

3. 通过对比nextProps和this.props，将nextProps的state为当前组件的state，从而重新渲染组件

  componentWillReceiveProps (nextProps) {
    nextProps.openNotice !== this.props.openNotice&&this.setState({
        openNotice:nextProps.openNotice
    }，() => {
      console.log(this.state.openNotice:nextProps)
      //将state更新为nextProps,在setState的第二个参数（回调）可以打         印出新的state
  })
}

2.2.shouldComponentUpdate(nextProps,nextState)

1. 主要用于性能优化(部分更新)

2. 唯一用于控制组件重新渲染的生命周期，由于在react中，setState以后，state发生变化，组件会进入重新渲染的流程，在这里return false可以阻止组件的更新

3. 因为react父组件的重新渲染会导致其所有子组件的重新渲染，这个时候其实我们是不需要所有子组件都跟着重新渲染的，因此需要在子组件的该生命周期中做判断

2.3.componentWillUpdate (nextProps,nextState)

shouldComponentUpdate返回true以后，组件进入重新渲染的流程，进入componentWillUpdate,这里同样可以拿到nextProps和nextState。

2.4.componentDidUpdate(prevProps,prevState)

组件更新完毕后，react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入这个生命周期，这里可以拿到prevProps和prevState，即更新前的props和state。

2.5.render()

render函数会插入jsx生成的dom结构，react会生成一份虚拟dom树，在每一次组件更新时，在此react会通过其diff算法比较更新前后的新旧DOM树，比较以后，找到最小的有差异的DOM节点，并重新渲染。

3. React新增的生命周期(个人补充)

3.1. getDerivedStateFromProps(nextProps, prevState)

代替componentWillReceiveProps()。 老版本中的componentWillReceiveProps()方法判断前后两个 props 是否相同，如果不同再将新的 props 更新到相应的 state 上去。这样做一来会破坏 state 数据的单一数据源，导致组件状态变得不可预测，另一方面也会增加组件的重绘次数。 举个例子:

// before
componentWillReceiveProps(nextProps) {
  if (nextProps.isLogin !== this.props.isLogin) {
    this.setState({ 
      isLogin: nextProps.isLogin,   
    });
  }
  if (nextProps.isLogin) {
    this.handleClose();
  }
}

// after
static getDerivedStateFromProps(nextProps, prevState) {
  if (nextProps.isLogin !== prevState.isLogin) {
    return {
      isLogin: nextProps.isLogin,
    };
  }
  return null;
}

componentDidUpdate(prevProps, prevState) {
  if (!prevState.isLogin && this.props.isLogin) {
    this.handleClose();
  }
}

这两者最大的不同就是: 在 componentWillReceiveProps 中，我们一般会做以下两件事，一是根据 props 来更新 state，二是触发一些回调，如动画或页面跳转等。

1. 在老版本的 React 中，这两件事我们都需要在 componentWillReceiveProps 中去做。

2. 而在新版本中，官方将更新 state 与触发回调重新分配到了 getDerivedStateFromProps 与 componentDidUpdate 中，使得组件整体的更新逻辑更为清晰。而且在getDerivedStateFromProps 中还禁止了组件去访问 this.props，强制让开发者去比较 nextProps 与 prevState 中的值，以确保当开发者用到 getDerivedStateFromProps 这个生命周期函数时，就是在根据当前的 props 来更新组件的 state，而不是去做其他一些让组件自身状态变得更加不可预测的事情。

3.2. getSnapshotBeforeUpdate(prevProps, prevState)

代替componentWillUpdate。 常见的 componentWillUpdate 的用例是在组件更新前，读取当前某个 DOM 元素的状态，并在 componentDidUpdate 中进行相应的处理。 这两者的区别在于：

• 在 React 开启异步渲染模式后，在 render 阶段读取到的 DOM 元素状态并不总是和 commit 阶段相同，这就导致在componentDidUpdate 中使用 componentWillUpdate 中读取到的 DOM 元素状态是不安全的，因为这时的值很有可能已经失效了。

• getSnapshotBeforeUpdate 会在最终的 render 之前被调用，也就是说在 getSnapshotBeforeUpdate 中读取到的 DOM 元素状态是可以保证与 componentDidUpdate 中一致的。此生命周期返回的任何值都将作为参数传递给componentDidUpdate（）。