まず、Expoを利用して、React Navigationを使った簡単なアプリを作成しました。
（プロジェクト名）/App.js
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
function HomeScreen({navigation}){
return(
<View>
<Text>HomeScreen</Text>
<Button
title="PUSH"
onPress={() => navigation.navigate("NextScreen")}/>
</View>
)
}
function NextScreen(){
return(
<View>
<Text>NextScreen</Text>
</View>
)
}
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen component={HomeScreen} name="HomeScreen"/>
<Stack.Screen component={NextScreen} name="NextScreen"/>
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
npx expo startで、Expo Goで問題なく動くか確認しました。
その次に、
npm expo install react-dom react-native-web @expo/webpack-config
を行いました。
そして、npx expo startを行い、説明に従い、『ｗ』でWebブラウザで開くことができました。
ここからは、
https://docs.expo.dev/workflow/web/
https://docs.expo.dev/distribution/publishing-websites/(Firebase HostingやGitHub Pagesへ挙げる方法） を参考にしてます。
npx expo export:web
npx serve web-build --single
とし、ローカルサーバで立ち上がるか確認しました。
Firebase Hostingを行います。
npm install -g firebase-tools としたのちに、
firebase login とし、
firebase init としました。Firebase内でプロジェクトを作成しておき、その中に、Hosting を使えるようにしておき、そのページはWebブラウザで開いておきます。
そして、
npx expo export:web としました。
firebase.jsonは下記のように修正しました。［①の部分はデフォルトでは、"public": "public"ですが下記にように修正］
{
"hosting": {
"public": "web-build", ・・・①
"ignore": [
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
}
]
}
}
最後に、firebase deploy --only hostingとすると、よいようです。
https://demo2-5a543.web.app
のようなURLが発行されますので、それをクリックするとアプリが使えるようになります。
これをスマホで開くと、当然Webブラウザか何かで開かれ、メニューで『ホーム画面に追加』とすると、アプリの並びの列にアイコンが追加されました。
