React NativeでのModalの作り方

7275 ワード
iOS modal react-native reactnative React iOS テキストリンク

はじめに

現在、React Nativeでアプリを開発しており、いい感じのModal(ボタンを押したら下から画面が出てくるやつ)を作ろうとしたのですが、悪戦苦闘したため、記事に残し備忘録の１つとして残します。

作り方

まずはModal画面に遷移するボタンを作成しましょう。ちなみに、今回はuseStateを使用します。

App.js

export default function App() {
  const [modalOpen, setModalOpen] = useState(false);

  return (
    <View>
      <View>
        <Text style={{ fontSize: 24 }}>Lists</Text>

        <TouchableHighlight
          style={styles.openButton}
          onPress={() => {
            setModalOpen(true);
          }}
        >
          <Text>Add</Text>
        </TouchableHighlight>
      </View>
  );
}

// スタイル

const styles = StyleSheet.create({
  openButton: {
    backgroundColor: "#F194FF",
    borderRadius: 20,
    padding: 10,
    paddingLeft: 20,
    paddingRight: 20,
    elevation: 2,
  },
});

Buttonタグでもいいのですが、ボタンらしいスタイルにしたいので今回はTouchableHighlightを使用しました。以下のスタイルのようになります。

Modalを追加

App.js
return (
    <View>

{/* 投稿画面 */}
      <Modal visible={modalOpen} animationType="slide">
        <View style={StyleSheet.modelContent}>
          <Text
            style={{
              fontSize: 30,
              paddingTop: 50,
              marginLeft: "auto",
              marginRight: "auto",
              marginTop: "auto",
              marginBottom: 70,
            }}
          >
            Modal画面
          </Text>
        </View>
      </Modal>

    <View> ~ </View>

    </View>
);

先ほどのコードの上にModalを追加すれば、完成です。Modal画面とボタンがある画面は別のファイルにコード記載した方が良さそうですね。今回は説明のためにあえて一緒に記述させました。以下がModal画面です。
これが下から出てきます。

あとがき

本当はMaterial Iconを押した時に、Modalが出てくるようにしたいのですが、調べてもよくわからなかったので、自作でボタンを作成して実装しました。分かる方がいましたら、教えて欲しいです。

参考

React Native - Modal