javascript寫App首選 就是 ReactNative

使用下面cmd 創建一個 react-native typescript 版本

npx react-native init MyApp --template react-native-template-typescript

接著安裝 react-native-navigation 這個是比較靠近原生方案 而 react-navigation 比較是像 react 的處理方案 注重效能比較好的可以選擇 react-native-navigation

https://wix.github.io/react-native-navigation/docs/installing

接這 參考官方的 install 方式

yarn add react-native-navigation

npx rnn-link 自動替換相關檔案的程式碼這樣才可以用 react-native-navigation

接著 使用 cd ios && pod install 更新ios 安裝相依套件

接著安裝 MMKV 管理storage 效能差很多 接著 安裝 react-hooks-global-state

讓每一個 register的 component 都可以互相使用共同變數 這個 react-native-navigation有點麻煩的式每個register的 component screen都是獨立的 所以共用變數部分要特別小心處理

import React, { useState } from 'react';
import { createGlobalState } from 'react-hooks-global-state';
const initialCounterState = { count: 0, };
const { useGlobalState } = createGlobalState(initialCounterState);

const CounterContext: any = React.createContext(useGlobalState);

const RootContextProvider = (props: any) => {
    const { children } = props
    const [count, setCount] = useGlobalState('count');
    return (<CounterContext.Provider value={{ count, setCount }}>{children}</CounterContext.Provider>);

}
export { CounterContext, RootContextProvider }

處理MMKV方式 一樣在管理screen這邊處理大家共用一個實例

import React from 'react'
import { Navigation } from 'react-native-navigation';
import MMKVStorage from "react-native-mmkv-storage";
import Home from '../home'
import Initializing from '../initializing'
import SignIn from '../signIn'
import SignUp from '../signUp'
import Screen2 from '../screen2'
const MMKV = new MMKVStorage.Loader().initialize(); // Returns an MMKV Instance 

export function registerScreens() {
    Navigation.registerComponent('Home', () => (props) => <Home {...props} MMKV={MMKV} />, () => Home);
    Navigation.registerComponent('Initializing', () => (props) => <Initializing {...props} MMKV={MMKV} />, () => Initializing);
    Navigation.registerComponent('SignIn', () => (props) => <SignIn {...props} MMKV={MMKV} />, () => SignIn);
    Navigation.registerComponent('SignUp', () => (props) => <SignUp {...props} MMKV={MMKV} />, () => SignUp);
    Navigation.registerComponent('Screen2', () => (props) => <Screen2 {...props} MMKV={MMKV} />, () => Screen2);

}

以上就是 rn app 版基本設定