こんにちは！かたつむり(@Katatumuri_nyan)です！
Reactを触ってみて、サイト的なものは作れるようになりました(*´ω｀)
そこで、次はReactNativeを触ってみようと思い、簡単なテキストエディタを作成しようと企んでおります(笑)
今回は、端末タイプや端末の向きによってデザインを変えていきます！
また、ボタンに影をつけたりなど、細かい修正もしていきます。
GitHubでソースコードを管理しています！
最初から見る↓
【1】React Nativeでテキストエディタを作ってみる！【下調べ編】
前回を見る↓
【14】React Nativeでテキストエディタを作ってみる！【インポート・エクスポート編】
目次
テスト環境
- Android Studio
- iPad Pro 9.7
- iPhone 7
- iPnone X
手直ししたい所
- モーダルの出る向き（iPhone）
- 縦向きの時のインプット・プレビューエリアのレイアウト
- 縦向きの時のモーダルのレイアウト
- 縦向きの時にキーボードの高さに合わせて要素の高さが変更されない
- 名前が長い時に収まりきらない
- ボタンなどに影をつける
↑このあたりを直していきたいと思います！
1. モーダルの出る向き（iPhone）
横画面でアプリを使用していても、なぜかモーダルが出る時は縦画面になってしまいますｗ
AndroidStudioではならなかったので、iosの仕様かな…？
このあたりの設定をしていきます。
iOS: Modal not showing in landscape orientationを参考に、↓以下を追加するとモーダルの向きが変更されました。
supportedOrientations={['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']}
2. 縦向きの時のインプット・プレビューエリアのレイアウト
スマホでアプリ画面が縦向きの時、プレビューエリアがめちゃくちゃ見にくいので、上下にするなど試行錯誤していきます！
iPadのスプリットビューにも対応したいので、アプリが縦向きの場合でアプリの横幅が一定以下の時にレイアウトを変更するようにします。
const isWindowWidthSmall = windowWidth < 760
const style={
lexDirection: isWindowWidthSmall ? 'column-reverse': 'row',
}
縦向きの判断は↓3番で行っている方法で行いました。
手持ちのiPadの横幅が768なので、アプリの横幅が760より小さい時に、レイアウトを変更するように設定しました。
3. 縦向きの時のモーダルのレイアウト
横の長さが足りていないので、レイアウトを変えていきますｗ
端末の向きで判断する方法もありますが、iPadでのスプリットビューでも反映されるのかちょっと分からないので、useWindowDimensionsを使っていきます。
単純に、アプリが占めるwindowの、横幅と縦幅の大きさを比較して、縦か横か判断しようとおもいます。
const windowWidth = useWindowDimensions().width const windowHeight = useWindowDimensions().height const isLandscape = (windowWidth / windowHeight) >= 1
↑isLandscapeをcontext.jsで定義して、各所で使えるようにしました。
4. 縦向きの時にキーボードの高さに合わせて要素の高さが変更されない
横画面の時は↓下のように、キーボードを避けるようになってるのですが、縦向きだと適応してくれませんｗ
適応させていきたいと思います！
おそらく、KeyboardAvoidingViewがちゃんと動いてないのだろうというのと、挙動がおかしいので、自分で書き換えられるか検討しました。
5. 名前が長い時に収まりきらない
↑こんな風に、名前がちゃんとおさまっていない場合があるので、調節していきます。
numberOfLinesで行数を指定し、横幅を固定することで、おさまるようにしました。
6. ボタンなどに影をつける
これはもくもくとやっていきます!
Shadow Propsで影をつけます！
全部に適応するのはめんどくさいので、別のファイルで影用のスタイルを書いておいて、共通で使おうと思います。
<View style={[style1,style2]}></View>
↑React Nativeでは、このようにスタイルを二つ渡すことが可能です。
React Nativeで複数のstyleを適用するによると、配列にして渡すとどちらも適応され、右側のスタイルの方が強いそうです。
↓続き
【16】React Nativeでテキストエディタを作ってみる！【画像インポート・デザイン微調節編】