Lynx｜Note

Home
Note
Lynx

概要

クロスプラットフォーム開発用のフレームワーク「Lynx」を使ってみる。

とりあえずQuick Start

https://lynxjs.org/guide/start/quick-start.html

プロジェクトの作成

1
npm create rspeedy@latest

1
◆  Create Rspeedy Project
2
│
3
◇  Project name or path
4
│  prayground <= 任意の名前
5
│
6
◇  Select language
7
│  TypeScript
8
│
9
◆  Select additional tools (Use <space> to select, <enter> to continue)
10
│  ◼ Add Biome for code linting and formatting
11
│  ◼ Add ESLint for code linting
12
│  ◼ Add Prettier for code formatting
13
│
14
◇  Next steps ─────────────╮
15
│                          │
16
│  1. cd prayground        │
17
│  2. git init (optional)  │
18
│  3. npm install          │
19
│  4. npm run dev          │
20
│                          │
21
├──────────────────────────╯
22
│
23
└  All set, happy coding!

以下の警告が出たが、とりあえず無視。

npm warn deprecated acorn-import-assertions@1.9.0: package has been renamed to acorn-import-attributes

Xcode

XcodeはApp Storeから取得する。Componentなし（Built-inだけ）でインストールしたらこの後のSimulator部分で進めなくなったので、[Xcode] - [Settings] - [Components]から「iOS 18.2 + iOS 18.3.1 Simulato」を選択してインストールした。

Simulator

Xcodeを起動したら[Open Developer Tool]からSimulatorを起動。[File] - [Open Simulator] - [iPhone 16 Pro]を選択すればiPhoneが立ち上がる。

LynxExplorer

LynxExplorerをダウンロードして解凍。

1
mkdir -p LynxExplorer-arm64.app && tar -zxf LynxExplorer-arm64.app.tar.gz -C LynxExplorer-arm64.app/

LynxExplorer-arm64.appディレクトリは破損した見た目になるが気にしない。作成したディレクトリをiPhoneにドラッグアンドドロップすると、ホーム画面にLynxExplorerが追加される。

開発サーバを起動する

1
npm run dev

起動したらGRコードとURLが表示されるので、LynxExplorerを起動して「Card URL」に当該URLを貼り付けて「Go」するとローカルが確認できた。Lynxのロゴはかっこいい。

/src/App.tsxを編集してみて、ホットリロードされることも確認できた。コードを見ると<text></text>や<view></view>などの、HTMLライクな独自要素を使って構築できるみたい。

1
import { useCallback, useEffect, useState } from '@lynx-js/react'
2

3
import './App.css'
4
import arrow from './assets/arrow.png'
5
import lynxLogo from './assets/lynx-logo.png'
6
import reactLynxLogo from './assets/react-logo.png'
7

8
export function App() {
9
  const [alterLogo, setAlterLogo] = useState(false)
10

11
  useEffect(() => {
12
    console.info('Hello, ReactLynx')
13
  }, [])
14

15
  const onTap = useCallback(() => {
16
    'background only'
17
    setAlterLogo(!alterLogo)
18
  }, [alterLogo])
19

20
  return (
21
    <view>
22
      <view className='Background' />
23
      <view className='App'>
24
        <view className='Banner'>
25
          <view className='Logo' bindtap={onTap}>
26
            {alterLogo
27
              ? <image src={reactLynxLogo} className='Logo--react' />
28
              : <image src={lynxLogo} className='Logo--lynx' />}
29
          </view>
30
          <text className='Title'>React</text>
31
          <text className='Subtitle'>on Lynx</text>
32
        </view>
33
        <view className='Content'>
34
          <image src={arrow} className='Arrow' />
35
          <text className='Description'>Tap the logo and have fun!</text>
36
          <text className='Hint'>
37
            Edit<text style={{ fontStyle: 'italic' }}>{' src/App.tsx '}</text>
38
            to see updates!
39
          </text>
40
        </view>
41
        <view style={{ flex: 1 }}></view>
42
      </view>
43
    </view>
44
  )
45
}

また時間ある時にドキュメントを読み進めてみる。

続く...かもね