カバー写真Kelly Sikkema on Unsplash
これらのブログの投稿は、反応に精通していると反応ネイティブと仮定します.シンプルにするためにもExpo .
私はまた、あなたがすでにreasonmlを使用する利点を知っていると仮定します.もしそうでなければチェックを勧めますReasonML docs または古いが、まだ非常に関連性"Why ReasonML?" .

パート1 : EXPO + reasonmlセットアップ

これは、エキスポとreasonmlの使用とモバイルアプリケーションを構築するためのブログポストシリーズの最初の部分です.この部分の主な焦点は、プロジェクトを設定して、RegonMLで最初のコンポーネントを書くことです.

始めましょう

ために我々の万博のアプリでreasonmlを使用するには、我々はBuslesScriptを追加する必要があります(現在のように知られている)ReScript ). reasonml/rescriptコードをJavaScriptにコンパイルする必要があります.
また、ネイティブのバインディングに対応する必要があります.私は、このシリーズの今度のブログ柱の結合についてより話します.バインディングは、JavaScriptコードとRealOnMLのコードの間の型インターフェイスを許可します.

1 .万博アプリを作成する

まず、万博アプリを作成するにはthe docs ):

# Create a new project

expo init my-project

次のステップEXPOで使用するテンプレートを尋ねます.

私は、管理されたワークフローからブランク(typescript)テンプレートを使うことを勧めます.

2 . reasonmlを追加する

現在のプロジェクトにネイティブな理由を追加する方法についての説明は次のとおりです.https://reason-react-native.github.io/en/docs/install (「追加理由は既存のプロジェクトに対してネイティブに反応する」.
または以下の手順に従います.

依存関係を追加する

先に述べたように、バックルスクリプト、理由反応と理由反応ネイティブの結合を必要とします

yarn add bs-platform --dev
yarn add reason-react reason-react-native

bsconfigを作成します。プロジェクトの根底にあるJSON

bsconfig.json はrescript (前者のバックグランドスクリプト)で使用される設定ファイルです

{
  "name": "my-reason-react-native-app",
  "refmt": 3,
  "reason": {
    "react-jsx": 3
  },
  "package-specs": {
    "module": "es6",
    "in-source": true
  },
  "suffix": ".bs.js",
  "sources": [
    {
      "dir": "src",
      "subdirs": true
    }
  ],
  "bs-dependencies": ["reason-react", "reason-react-native"]
}

srcディレクトリを作成し、アプリケーションを追加します。srcに再

インApp.re 私たちは、reasonmlを使用して、最初のコンポーネントを作成します.

open ReactNative;

[@react.component]
let make = () => {
  <View> <Text> {React.string("Hello from ReasonML!" ++ {j| 🎉|j})} </Text> </View>;
};

パッケージにスクリプトを追加します。JSON

つのスクリプトを追加しましょう.

"re:build": "bsb -clean-world -make-world",
"re:watch": "bsb -clean-world -make-world -w",
"re:clean": "bsb -clean-world"

アプリを編集します。プロジェクトのルートにおけるTSX

エキスポプロジェクトが始まりますApp.tsx 我々はそれを使用するように編集しますApp.re からsrc ルートディレクトリとしてディレクトリ:

export { make as default } from './src/App.bs.js';

我々は、インポートApp.bs.js ファイルとしてファイルをリスクリプトコンパイラが作成したファイルです.

3 .アプリケーションの実行

一つの端末では、ウォッチモードでコンパイラを実行しましょう.

yarn re:watch

他のランExpoアプリケーションでは:

yarn start

次のようになります.

まとめ

reasonmlを書く能力を加えることは難しくありません、それで、それを試してみて、あなたのプロジェクトにもたらすことができるどんな利益をあなた自身で見てください!
私は小さなヘルパーを作成しましたExpo ReasonML Starter ですから、万博で新しいアプリを構築するたびに、これらの手順を通過する必要はありません.
編集
最後に、私はそれも簡単に1つのエキスポinitコマンドを使用してアプリケーションを構築を開始できるようにした

expo init -t expo-template-rescript

もっと詳細を必要とするか、テンプレートを改良したいなら、ここでrepo :https://github.com/mlventures/expo-template-rescript

次は何ですか

RealonMLを使用した実際のアプリケーションの構築(最も一般的な反応ネイティブコンポーネントとAPIの使用)

結合の書き込み

あなたがこのシリーズで見たいと思う他に何かがあるならば、以下のコメントをしてください