ExpoでReact Navigationを利用したアプリをＰＷＡ化する

App.js

import { StatusBar } from "expo-status-bar";

import { StyleSheet, Text, View } from "react-native";

import { NavigationContainer } from "@react-navigation/native";

import { createStackNavigator } from "@react-navigation/stack";

import HomeScreen from "./screens/HomeScreen";

import NextScreen from "./screens/NextScreen";

import * as serviceWorkerRegistration from "./src/serviceWorkerRegistration";

const Stack = createStackNavigator();

export default function App() {

  return (

    <NavigationContainer>

      <Stack.Navigator>

        <Stack.Screen name="HomeScreen" component={HomeScreen} />

        <Stack.Screen name="NextScreen" component={NextScreen} />

      </Stack.Navigator>

    </NavigationContainer>

  );

}

serviceWorkerRegistration.register();

HomeScreen.js

import { View, Text, Button } from "react-native";

export default function HomeScreen({ navigation }) {

  return (

    <View>

      <Text>Home Screen</Text>

      <Button

        title="Next Screen"

        onPress={() => navigation.navigate("NextScreen")}

      />

    </View>

  );

}

NextScreen.js

import { Text } from "react-native";

export default function App() {

  return <Text>NextScreen</Text>;

}

React Navigationに関連したライブラリをインストールします。

npx expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

npx expo install @expo/metro-runtime

これで

npx expo start

ののちに、『w』で　webで開くことができます。

次にPWA化する（PWA化の記事参照）

ローカルサーバーを立ち上げる

npx serve web-build --single