javascript - How to open a react native modal on button click in react native? - Stack Overflow

admin管理员组

文章数量:1315110

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.

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.

• javascript
• reactjs
• react-native
• onclick
• modal-dialog

Share Improve this question Follow edited Jun 20, 2018 at 9:02 Jee Mok 6,56688 gold badges5353 silver badges8383 bronze badges asked Jun 20, 2018 at 6:24 AndroidNewBeeAndroidNewBee 74433 gold badges1212 silver badges3737 bronze badges 8

• So what is your problem? Are you getting exception? Or no exception but system hang...?Or.........? – Isaac Commented Jun 20, 2018 at 6:27
• The problem is it doesn't open the modal. But when I place the button within the modal tags it works.I want to open it on click of the button. – AndroidNewBee Commented Jun 20, 2018 at 6:29
• Try to setup the environment @ snack.expo.io – Isaac Commented Jun 20, 2018 at 6:30
• 1 The official GitHub did shared all the codes needed to use this module, have you checked them out? github./sohobloo/react-native-modal-dropdown/blob/master/… – Isaac Commented Jun 20, 2018 at 6:31
• Thanks @Isaac I'll go through this also this is the link to my code on snack snack.expo.io/SkeuBuw-m – AndroidNewBee Commented Jun 20, 2018 at 6:35

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 2

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./react-native-munity/react-native-modal

I followed the example given by @Issac at https://github./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>

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

本文标签： javascriptHow to open a react native modal on button click in react nativeStack Overflow