Sometimes we want to reuse some existing native libraries without having to reimplement it in JavaScript, or write some high performance, we need to communicate with native in RN.

Get Started

  • Defined module name.
  • Export a native method to JavaScript via @ReactMethod.
  • Sending events to JavaScript via RCTDeviceEventEmitter.

The native module can then be accessed in JS like this:

const { WizardModule } = ReactNative.NativeModules;

JavaScript modules can then register to receive events by addListener on the NativeEventEmitter class.

import { NativeEventEmitter, NativeModules } from 'react-native';
...
componentDidMount() {
...
const eventEmitter = new NativeEventEmitter(NativeModules.WizardModule)…

Sometimes we need to communicate with native in Flutter. We need to use Platform Channels APIs for communication, mainly including the following three types:

  • MethodChanel:used for method invocation.
  • EventChannel:used for communication of event streams.
  • BasicMessageChannel:used for communication of message.

MethodChannel

Flutter calls native


It’s sometimes not practical to rewrite your entire application in Flutter all at once. For those situations, Flutter can be integrated into your existing application piecemeal, as a library or module. That module can then be imported into your Android app to render a part of your app’s UI in Flutter.

Get Started

Add a single Flutter screen

First, we need to add FlutterActivity to AndroidManifest.xml.

Next, we use a cached FlutterEngine to launch FlutterActivity.

Add a Flutter Fragment


Flutter Night

這次很有榮幸的被受邀擔任 Google 舉辦的 Flutter Engage Extended — Flutter Night 活動的講者,我分享的主題是 State Restoration

Concept

當App在背景模式運行,經過很長的一段時間,我們將App喚起,讓它變成前景模式運行,此時App會重新啟動,並不會恢復到上次我們使用App的狀態。主要原因是當App在背景模式運行很長一段時間,手機作業系統為了節省記憶體與資源運算,會清除到App。但這樣的話,就會造成App的使用者體驗不好,因此解決方案就是使用 State Restoration 機制。

什麼是 State Restoration

State Restoration 就是即使App在背景模式運行很久,被手機作業系統清除,之後我們將App喚起到前景模式運行,App依舊會恢復到上次我們使用App的狀態。

Flutter v1.22 開始,提供了 State Restoration 機制。下方是 State Restoration 的架構簡易圖:


Continuous Integration and Continuous Deployment System let you automatically build and test your app every time. The goal of the article is how to automatically build Android APK, then upload the generated APK to Slack.

Get Started

First, we need to create a package install configuration file Dockerfile.

Docker configuration

Next, we need to create a Docker Image through written the Dockerfile.

docker build -t registry.example.com/group/project:tag .

e.g. docker build -t registry.silkrode.com.tw/team_mobile/jys:1.0.1 .

Finally, we push the Docker image to Gitlab Container Registry.

docker push registry.example.com/group/project:tag

e.g. docker push registry.silkrode.com.tw/team_mobile/jys:1.0.1


本篇主要如何辨識比特幣地址與差異,以及比特幣為何要提供SegWit(隔離見證)機制。

首先,我們來探討比特幣地址的格式有哪些,比較一下它們之間的差異在哪裡?

比特幣地址格式與差別

1. 傳統地址

  • 主鏈的地址以數字1開頭,測試鏈的地址以m or n開頭。
  • 採用 P2PKH (Pay 2 Public Key Hash) 與 Base58 編碼生成地址。
  • 交易手續費較高。
  • 支持的錢包與交易所較多。

2. 多簽地址

  • 主鏈的地址以數字3開頭,測試鏈的地址以數字2開頭。
  • 採用 P2SH (Pay 2 Script Hash) 與 Base58 編碼生成地址。
  • 交易手續費適中。
  • 支持的錢包與交易所較多。

3. 隔離見證地址

  • 主鏈的地址以bc1開頭,測試鏈的地址以tb1開頭。
  • 採用 Bech32 編碼生成地址。
  • 交易手續費較低。
  • 支持的錢包與交易所較少,但近年來陸續增加中,其中 Trust Wallet 已支援該地址格式。

比特幣交易時,經常遇到塞車的問題,造成交易速度過慢,導致使用者必須提高交易手續費,才能解決此問題。近年來,開發者想出很多種方式來解決交易速度過慢的問題,其中一種是用擴容的方式。擴容的解決方案很多,最簡單的解決方式是增加每個區塊的大小,另一種是用SegWit,再加上閃電網路的方式解決。接下來,我們來介紹什麼是 SegWit (隔離見證) 與 Lightning Network (閃電網路)?

SegWit & Lightning Network

SegWit 主要是將 Signature 從原本的交易區塊中移出,放置於其他地方,改變了原本的區塊結構。SegWit的區塊可以存放更多筆交易,達到了擴容。


2019 Google I/O 大會,官方推出了 Flutter 狀態管理 Provider,取代了原本的狀態管理 Provide。Provider 是一種簡單且容易上手的狀態管理機制,非常適合Flutter入門者使用。

Provider

Provider 繼承於 InheritedWidget ,提供了單向資料流與 Dependency Injection 的機制,並且實現了更小單元(Widget)的渲染,大幅提升App整體的效能。

學習Provider,需要理解四個觀念:

  • ChangeNotifier:管理商業邏輯與儲存狀態。當狀態需要更新時,透過 notifyListeners 更新渲染UI。
  • ChangeNotifierProvider:提供 ChangeNotifier Instance 給 Widget,就是提供了 Dependency Injection 的機制。
  • Provider.of:在 Widget 中取得 ChangeNotifier Instance。
  • Consumer:監聽 ChangeNotifier 裡面自定義的狀態,如果狀態發生變化,則更新渲染UI。

Provider 狀態管理機制,提供了很多種類型的Provider,如下:


上次介紹區塊鏈虛擬貨幣錢包後,今天想分享區塊鏈虛擬貨幣的交易,讓大家知道一筆區塊鏈交易是如何建立出來的。

本篇主要介紹如何透過Flutter建立以太坊虛擬貨幣交易

Ethereum

這幾年區塊鏈世界中最有名的就是以太坊,Vitalik Buterin 認為區塊鏈除了應用在加密貨幣之外,應該要拓展到各個領域,各行各業,讓世界的運轉更加透明平等,因此開發了一個區塊鏈平台 — 以太坊(Ethereum),他讓不同領域的開發人員建立區塊鏈去中心化應用程式 Dapp (Decentralized Applications)。

區塊鏈美少女 — 以太坊

Transaction

以太坊最大的特色就是智能合約(Smart Contract),必須透過交易才可執行。首先說明送出一筆交易的主要流程:

  • 準備交易資料。
  • 使用 Pri …


最近面試到來自區塊鏈公司的工程師,回憶起以前做區塊鏈虛擬貨幣錢包的日子,心裡想著如果用Flutter的話,要如何創造出虛擬貨幣錢包呢,因此試著研究一下。

本篇主要介紹如何透過Flutter產生虛擬貨幣錢包地址

Blockchain

說到區塊鏈,第一個想到的就是比特幣,它是最早出現,同時也是目前全球共識最強的加密貨幣。

什麼是比特幣?

Zombit新手大哉問 — 比特幣(上)
Zombit新手大哉問 — 比特幣(下)

區塊鏈技術就像是加密貨幣的心臟,若沒有區塊鏈技術,就沒有加密貨幣的一切。

什麼是區塊鏈?

Zombit新手大哉問 — 區塊鏈

HD Wallet

在虛擬貨幣世界裡,所有交易資料都是存放在區塊鏈上,而虛擬貨幣錢包存放的是私鑰。透過私鑰來找出對應的公鑰,再從公鑰產生出錢包地址,也就是帳戶。有了錢 …


一直以來都知道 Animation 是 Flutter 的特點之一,最近剛好看到Rive開發了一隻可愛的天鵝Guss,因此寫了一款登入頁面的App。

Dave Chao

Senior Software Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store