ReactNative for Web(Expo web)でアプリリリースしてみた
始めまして。私は、Interchaoという英語学習アプリを作成しています。このアプリはReact Nativeで作成しており、AndroidとIOSの両方をリリースしております。
Interchaoには「日記を書く」という機能があるので、やはりスマホアプリだけでは辛いということで、Web化に踏み切りました。
先日無事リリースができたので、変更点を中心にまとめていきます。
環境
Expo 37
react navigation version 4
Sentry
sentry-expoはWebだと使えません。@sentry/browserをインストーして使いましょう。
Modal
react-native-modalは使えません。modal-enhanced-react-native-webを代わりに使いました。
SwipeablePanel
rn-swipeable-panelのversion1.0.20だと動きませんでした。1.2.0にあげたら動くようになりました。
Alert
react nativeのAlertはWebでは使えません。私は全てmodal-enhanced-react-native-webで書き直しました。
TextInput
TextInputは色々厄介でした。
①autoが使えない
web + スマホだとautoが指定できません。
②heightの自動調整ができない
multilineの時、ネイティブアプリだと自動でTextInputの高さを調整してくれるのですが、webではTextInputが大きくなりません。style={{height: 100}}
のように、heightを数字で直接指定ればいけるのですが、可変のところはこれでは厳しい。
そんな時は下記コードでいけます。
const [scrollHeight, setScrollHeight] = useState(null);
const handleFocus = (e: any): void => {
setScrollHeight(e.target.scrollHeight);
};
const handleChange = (e: any): void => {
setScrollHeight(e.target.scrollHeight);
};
<TextInput
...中略
style={[styles.textInput, { height: scrollHeight }]}
onFocus={handleFocus}
onChange={handleChange}
/>
③onEndEditingが使えない
onEndEditingの挙動がおかしかったです。onBlurに全て書き換えました。
Updates
OTAアップデートは、できません(当たり前ですが。笑)
ここはif文で飛ばしましょう。
Share
Shareが使えません。InterchaoではTwitterとFacebookにシェアする機能を実装したい。なので、Shareライブラリは諦めて、直接作りました。
Amplitude
Amplitudeが使えませんでした。これは諦めました。
デザイン関連
スマホ、PC、Web、Android、Iosそれぞれにおいてデザインを作り分けなければいけません。
作りたいのは下記4つ。
①Web & PC
②Web & スマホ(タブレット)
③Nativeアプリ & Android
④Nativeアプリ & iOS
既に③④はできているので、今回新たに①と②を対応しました。
①は新デザインにしました。②はスマホアプリと全く同じデザインにしました。
WebとPCでファイルごと書き換える方法
AAA.native.tsx
AAA.web.tsx
ファイル内で細かく分ける時
Webかどうかのジャッチ(①または②)は下記でできます。
Platform.OS === "web"
①or②のジャッチはreact-responsiveを使います。ソースはこれでいけます。
const isTabletOrMobileDevice = useMediaQuery({
maxDeviceWidth: 1224,
});
Tab
一番大きな変更はタブの構成。createBottomTabNavigatorをIntechaoでは使っています。
スマホの時は下に
これはcreateBottomTabNavigatorの変数をいじる。みたい簡単なものじゃできませんでした。なんかできそうなのに。。。
詳細はここ参考にして作りました。有料サイトですが、自分でこの方法思いつくよりはみた方がいいかと。
https://medium.com/@bruno.eduardo.do/creating-a-custom-side-tab-navigator-with-react-navigation-28304b83e865
まとめ
トータルで丸7日でInterchaoはWeb化できました。全画面試験しなすので、規模が大きいアプリだと結構大変かと思います。ただ、Reactで全部作り直すよりは圧倒的に早いです。
React Native for webはとにかく情報が少ないので、これから積極的にブログ書いていこうと思います!!
ここから必要な作業は、
・metaタグ書く
・next.js化する(必須ではないが私はやる)
・pathを設定していく
ここについてはこれからやっていくので、終わり次第まとめていきます。
作ったサイトはこちらです。
https://interchao.app/
Author And Source
この問題について(ReactNative for Web(Expo web)でアプリリリースしてみた), 我々は、より多くの情報をここで見つけました https://qiita.com/sato-daiki/items/68ce166f1338762d4ea0著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .