如何在React Native中单击按钮以打开React Native模式？

Question

I am new to react native and I am trying to open a modal on button click. I am trying to use the following code to open the modal:-

  openHeaderModal = () => {
    <ModalDropdown
      options={["H1", "H2", "H3"]}
      dropdownStyle={{
        borderRadius: 6,
        backgroundColor: "#26344a",
        shadowColor: "rgba(0, 0, 0, 0.2)",
        shadowOffset: {
          width: 0,
          height: 5
        },
        shadowRadius: 20,
        shadowOpacity: 1,
        padding: 8
      }}
      dropdownTextStyle={{
        fontFamily: "poppins-500",
        fontSize: 16,
        fontStyle: "normal",
        letterSpacing: 0,
        textAlign: "left",
        color: "#ffffff",
        backgroundColor: "#26344a"
      }}
    >
    </ModalDropdown>
  }

I am using react-native-modal-dropdown for modal. Following is my jsx code for the buton:-

  <Button onPress={() => this.openHeaderModal()} vertical>
     <Image
       style={{ marginTop: 20 }}
       source={require("../assets/heading.png")}
     />
  </Button>

Any help and support is appreciated. Thank you.

Answer 1

I think open a Modal in react-native very easy, simple example:

import React, {Component} from 'react';
import {Modal, Text, TouchableHighlight, View} from 'react-native';

class ModalExample extends Component {
  state = {
    modalVisible: false,
  };

  setModalVisible(visible) {
    this.setState({modalVisible: visible});
  }

  render() {
    return (
      <View style={{marginTop: 22}}>
        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            alert('Modal has been closed.');
          }}>
          <View style={{marginTop: 22}}>
            <View>
              <Text>Hello World!</Text>

              <TouchableHighlight
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}>
                <Text>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>

        <TouchableHighlight
          onPress={() => {
            this.setModalVisible(true);
          }}>
          <Text>Show Modal</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

Link: https://facebook.github.io/react-native/docs/modal.html#docsNav

If you want to use library: https://github.com/react-native-community/react-native-modal

Answer 2

I followed the example given by @Issac at https://github.com/sohobloo/react-native-modal-dropdown/blob/master/example/index.js and solved the problem. Following is the code to inflate the Modal drop down on a button click:-

 <ModalDropdown
              style={{ marginLeft: 50 }}
              ref={el => this._dropdown_5 = el}
              defaultValue=''
              dropdownStyle={{
                borderRadius: 6,
                backgroundColor: "#26344a",
                shadowColor: "rgba(0, 0, 0, 0.2)",
                shadowOffset: {
                  width: 0,
                  height: 5
                },
                shadowRadius: 20,
                shadowOpacity: 1,
                padding: 8
              }}
              dropdownTextStyle={{
                fontFamily: "poppins-500",
                fontSize: 16,
                fontStyle: "normal",
                letterSpacing: 0,
                textAlign: "left",
                color: "#ffffff",
                backgroundColor: "#26344a"
              }}
              options={['H1', `H2`, 'H3']}
              onDropdownWillShow={this._dropdown_5_willShow.bind(this)}

            />

code for the onPress of the button:-

<Button onPress={this._dropdown_5_show.bind(this)} vertical >
                  <Image style={{ marginTop: 20 }} style={{}} source={require("../assets/heading.png")} />
                </Button>

Answer 3

Please find below link for modal demo
https://reactnativecode.com/react-native-modal-ios-android/