【React Native】iOS13で標準になったPageSheetをReact Navigationで実装する方法

ReactNative
スポンサーリンク

React Native Expo + React Navigation (Version 5) を使って、

iOS13で標準になったPageSheetを実装していきたいと思います。

出来上がりイメージは以下になります。

【iOS】

【Android】

それではコードを書いていきましょう。
まずは、TOPの画面と、クリックして表示される遷移先の画面を作成します。
【Home.js】
import React from 'react';
import { StyleSheet, View, Button } from 'react-native';

export default Home = ({ navigation }) => {

  return (
    <View style={styles.container}>
      <Button
        title="Open Next Screen"
        onPress={() => navigation.navigate('Next')}
      />
    </View>
  )

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  }
})

【Next.js】

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

export default Next = () => {

  return (
    <View style={styles.container}>
      <Text>This is Next Screen.</Text>
    </View>
  )

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  }
})

ナビゲーションの設定をしていきます。

【MyStack.js】

import React from 'react';
import { createStackNavigator, TransitionPresets } from '@react-navigation/stack';

import { Home, Next } from '../screens';

export default MyStack = () => {

  const Stack = createStackNavigator()

  return (
    <Stack.Navigator
      initialRouteName="Home"
      screenOptions={{
        gestureEnabled: true,
        cardOverlayEnabled: true,
        ...TransitionPresets.ModalPresentationIOS,
      }}
      mode="modal"
      headerMode="none"
    >
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Next" component={Next} />
    </Stack.Navigator>
  )

}
以下の設定でモーダル表示や、ジェスチャーイベントの制御など行っています。
screenOptions={{
  gestureEnabled: true,
  cardOverlayEnabled: true,
  ...TransitionPresets.ModalPresentationIOS,
}}

App.jsで作成したナビゲーションを使用していきます。

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

import MyStack from './src/navigations/MyStack';

export default function App() {
  return (
    <NavigationContainer>
      <MyStack />
    </NavigationContainer>
  );
}

ここまでで完成です。アプリを実行してみてください

expo start

詳しいコードはGitHubを参照、もしくはコメントで疑問点投げてください。

 

こちら私がReact Nativeの勉強を始めたときに読んだ本です。

読み勧めていくと、インスタグラムチックなアプリが完成します。

説明も豊富なので興味があればぜひ読んでみてください。

コメント

タイトルとURLをコピーしました