はじめに
- ReactNativeで画面遷移をしてみる
- WebViewを利用する
画面遷移
公式サイトでも推奨されているReactNavigationをインストールして利用してみる docs.expo.io
公式サイト(抜粋 / google翻訳)
React Navigationは、React Nativeエコシステムで最も人気のあるナビゲーションライブラリであり、Expoによって維持されているため、アプリでの動作が保証されています。スタック、タブ、引き出しなどの一般的なナビゲーションパターンのサポートが含まれています。また、カスタマイズ可能に構築されているため、ライブラリに組み込まれていなくても、希望するナビゲーションパターンを実現できます。これは、createNativeStackNavigatorを介したプラットフォームネイティブAPIの使用をサポートします。これは、React Nativeでは一般に「ネイティブナビゲーション」と呼ばれます。
- ReactNavigation reactnavigation.org
関連ライブラリをインストール
React Navigationをインストール
- ページ遷移を実装できるライブラリ
npm install @react-navigation/native
- 次にExpoが管理するプロジェクトに依存関係をインストールする。次のコマンドを実行します。
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
navigation stack navigatorインストール
- アプリが画面を切り替える方法を提供します。新しい画面はそれぞれスタックの一番上に配置されます。 reactnavigation.org
npm install @react-navigation/stack
WebView
- アプリ上でWebコンテンツをネイティブビューでレンダリングします。 reactnative.dev
expo install react-native-webview
- 使い方
import { WebView } from 'react-native';
<WebView
source={{
uri: 'https://github.com/facebook/react-native'
}}
style={{ marginTop: 20 }}
/>
TouchableOpacity
- 標準ライブラリ。インストールする必要がなく。Importするだけで利用可能
- タップしたときにイベントをハンドリングできる。
- ビューをタッチに適切に応答させるためのラッパー。押し下げると、ラップされたビューの不透明度が低下し、薄く表示されます。 不透明度は、子をビュー階層に追加されたAnimated.Viewでラップすることによって制御されます。これはレイアウトに影響を与える可能性があることに注意してください。 reactnative.dev
import { TouchableOpacity,View } from 'react-native';
<TouchableOpacity onPress={onPress}>
<View>ほげほげ</View>
</TouchableOpacity >
