iosアプリでよく見るモーダルをReact Nativeで使ってみました。
↓こういうのです。

やり方
これを実装するにはReact Nativeで用意されているModalコンポーネントのpresentationStyle
でpageSheet
を指定します。
<Modal
presentationStyle='pageSheet'
>
</Modal>

Modal · React Native
The Modal component is a basic way to present content above an enclosing view.
Swiftの方でもpageSheet
と言うらしいです。pageSheet
以外の解説も以下の記事に載っていました。

iOSにおけるモーダル表示まとめ | アシアルブログ
モーダルスタイルの指定方法 Swift let vc = ChildViewController() vc.modalPresentationStyle = .fullScreen present(vc, animated: true) Swift と Segue override func prepare(for s...
作ってみた
簡単にモーダルを使って実装してみました。
import { useState } from 'react';
import { StyleSheet, Text, View, Modal, Button } from 'react-native';
export default function App() {
const [visible, setVisible] = useState(false)
const reverseVisible = () => {
setVisible((vis)=>!vis)
}
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<Button
title='open modal'
onPress={reverseVisible}
/>
<Modal
animationType='slide'
presentationStyle='pageSheet'
visible={visible}
>
<View style={styles.modalView}>
<Text>hello modal</Text>
<Button
title='close modal'
onPress={reverseVisible}
/>
</View>
</Modal>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
modalView: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
});
コメント