反応ネイティブでハーフモーダルを開く方法は?

シダス

私はreactnativeアプリを作成しており、react-nativeモーダルコンポーネントを使用してモーダルを開き、次のコードで完全なモーダルを開くことができます。以下にコードサンプルについて説明しました。今、私はハーフモーダルを開きたいと思いました。

これが私が試したものです。

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  ScrollView,
  TouchableOpacity,
  TextInput,
  Image,
  Modal,
} from 'react-native';

export default class Test extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modalVisible: false,
    };
  }
  setModalVisible(visible) {
    this.setState({modalVisible: visible});
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.headerText}>Test Half Modal</Text>
          <TouchableOpacity
            style={styles.addButton}
            onPress={() => {
              this.setModalVisible(true);
            }}>
            <Text style={styles.addButtonText}>Open</Text>
          </TouchableOpacity>
        </View>

        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            // this.closeButtonFunction()
          }}>
          <View style={styles.footer}>
            <Text style={styles.headerText}>This is Half Modal</Text>
          </View>
          <TouchableOpacity
            style={styles.addButton}
            onPress={() => {
              this.setModalVisible(!this.state.modalVisible);
            }}>
            <Text style={styles.addButtonText}>Close</Text>
          </TouchableOpacity>
        </Modal>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#98B3B7',
    justifyContent: 'center',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  headerText: {
    color: 'black',
    fontSize: 18,
    padding: 26,
  },
  noteHeader: {
    backgroundColor: '#42f5aa',
    alignItems: 'center',
    justifyContent: 'center',
    borderTopLeftRadius: 50,
    borderTopRightRadius: 50,
  },
  footer: {
    flex: 1,
    backgroundColor: '#ddd',
    bottom: 0,
    left: 0,
    right: 0,
    zIndex: 10,
  },
  textInput: {
    alignSelf: 'stretch',
    color: 'black',
    padding: 20,
    backgroundColor: '#ddd',
    borderTopWidth: 2,
    borderTopColor: '#ddd',
  },
  },
  addButton: {
    position: 'absolute',
    zIndex: 11,
    right: 20,
    bottom: 90,
    backgroundColor: '#98B3B7',
    width: 70,
    height: 70,
    borderRadius: 35,
    alignItems: 'center',
    justifyContent: 'center',
    elevation: 8,
  },
  addButtonText: {
    color: '#fff',
    fontSize: 18,
  },
});

上記のコードを使用して、完全なモーダルを開くことができます。いくつかのスタイルまたは他の何かを使用してハーフモーダルを開くにはどうすればよいですか?

グルパランギリタラン

モーダルコンテンツのラッパービューが必要になります。画面の半分だけを表示することを計画しているため、透明にする必要があります。以下のようにモーダルコードを更新します。背景色を青にしたので、好きなように変えられます。高さは必要に応じて50%に設定され、marginTopはautoに設定され、画面の下半分に移動します。

<Modal
  animationType="slide"
  transparent={true}
  visible={this.state.modalVisible}
  onRequestClose={() => {
    // this.closeButtonFunction()
  }}>
  <View
    style={{
      height: '50%',
      marginTop: 'auto',
      backgroundColor:'blue'
    }}>
    <View style={styles.footer}>
      <Text style={styles.headerText}>This is Half Modal</Text>
    </View>
    <TouchableOpacity
      style={styles.addButton}
      onPress={() => {
        this.setModalVisible(!this.state.modalVisible);
      }}>
      <Text style={styles.addButtonText}>Close</Text>
    </TouchableOpacity>
  </View>
</Modal>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

反応ネイティブでカレンダーアプリを開く方法

分類Dev

反応ネイティブモーダルにborderRadiusを設定する方法は?

分類Dev

反応ネイティブでモーダルを閉じる方法

分類Dev

反応ネイティブでHTTPサーバーを開く方法

分類Dev

反応ネイティブでボタンを押してキーボードを開く方法は?

分類Dev

モーダル内でネイティブFlatListを反応させる

分類Dev

反応ネイティブAndroidでアプリ設定ページを開く方法は?

分類Dev

反応ネイティブからネイティブモジュールに画像を送信する方法は?

分類Dev

反応ネイティブでファイル(画像、gifなど)をダウンロードする方法

分類Dev

モーダルでネイティブスクロールに反応する

分類Dev

ネイティブ検索フィルターに反応し、モーダルを開いて検索とリストを選択します

分類Dev

反応ネイティブでビデオプレーヤーを開く

分類Dev

関数からコンポーネントを開く方法はネイティブに反応します

分類Dev

反応ネイティブでTextInputにフォーカスまたはカーソルを設定する方法

分類Dev

反応ネイティブでローカル画像を使用する方法は?

分類Dev

反応ネイティブページから迅速に既存のViewControllerを開く方法は?

分類Dev

反応ネイティブモーダルでハードウェアの戻るボタンが押されるのを処理または防止する方法は?

分類Dev

反応ネイティブのヘッダーにあるハンバーガーアイコンをクリックして引き出しを開く方法は?

分類Dev

反応ネイティブでオーディオファイルをダウンロードしますか?

分類Dev

2つのフォルダーを過ぎてネイティブに反応するコンポーネントをインポートする方法は?

分類Dev

反応ネイティブでハッシュからのデータを表示する方法は?

分類Dev

モーダルの上にボタン(モーダルを開く)を表示する方法は?リアクトネイティブ

分類Dev

ネイティブモーダルに反応し、キーボードを開いたときにビューのサイズを変更しないでください(Android)

分類Dev

反応ネイティブJSからネイティブAndroidモジュールを呼び出す方法

分類Dev

クリックボタンでモーダルを閉じるネイティブに反応

分類Dev

反応ネイティブでモーダル内にビデオを表示しようとしています

分類Dev

フォーカスリアクティブフォームテキストフィールドで角度モーダルを開く方法は?

分類Dev

反応ネイティブに石鹸ヘッダーを追加する方法は?

分類Dev

別のファイルにコードを置くことはネイティブに反応します

Related 関連記事

  1. 1

    反応ネイティブでカレンダーアプリを開く方法

  2. 2

    反応ネイティブモーダルにborderRadiusを設定する方法は?

  3. 3

    反応ネイティブでモーダルを閉じる方法

  4. 4

    反応ネイティブでHTTPサーバーを開く方法

  5. 5

    反応ネイティブでボタンを押してキーボードを開く方法は?

  6. 6

    モーダル内でネイティブFlatListを反応させる

  7. 7

    反応ネイティブAndroidでアプリ設定ページを開く方法は?

  8. 8

    反応ネイティブからネイティブモジュールに画像を送信する方法は?

  9. 9

    反応ネイティブでファイル(画像、gifなど)をダウンロードする方法

  10. 10

    モーダルでネイティブスクロールに反応する

  11. 11

    ネイティブ検索フィルターに反応し、モーダルを開いて検索とリストを選択します

  12. 12

    反応ネイティブでビデオプレーヤーを開く

  13. 13

    関数からコンポーネントを開く方法はネイティブに反応します

  14. 14

    反応ネイティブでTextInputにフォーカスまたはカーソルを設定する方法

  15. 15

    反応ネイティブでローカル画像を使用する方法は?

  16. 16

    反応ネイティブページから迅速に既存のViewControllerを開く方法は?

  17. 17

    反応ネイティブモーダルでハードウェアの戻るボタンが押されるのを処理または防止する方法は?

  18. 18

    反応ネイティブのヘッダーにあるハンバーガーアイコンをクリックして引き出しを開く方法は?

  19. 19

    反応ネイティブでオーディオファイルをダウンロードしますか?

  20. 20

    2つのフォルダーを過ぎてネイティブに反応するコンポーネントをインポートする方法は?

  21. 21

    反応ネイティブでハッシュからのデータを表示する方法は?

  22. 22

    モーダルの上にボタン(モーダルを開く)を表示する方法は?リアクトネイティブ

  23. 23

    ネイティブモーダルに反応し、キーボードを開いたときにビューのサイズを変更しないでください(Android)

  24. 24

    反応ネイティブJSからネイティブAndroidモジュールを呼び出す方法

  25. 25

    クリックボタンでモーダルを閉じるネイティブに反応

  26. 26

    反応ネイティブでモーダル内にビデオを表示しようとしています

  27. 27

    フォーカスリアクティブフォームテキストフィールドで角度モーダルを開く方法は?

  28. 28

    反応ネイティブに石鹸ヘッダーを追加する方法は?

  29. 29

    別のファイルにコードを置くことはネイティブに反応します

ホットタグ

アーカイブ