如何在React Native中点击按钮打开一个React Native模态框？

Question

我对React Native还不熟悉，尝试在按钮点击时打开一个模态框。 我正在尝试使用以下代码来打开模态框：

  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>
  }

我正在使用react-native-modal-dropdown来制作模态框。 以下是我的jsx代码：

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

非常感谢您的帮助和支持。谢谢。

- AndroidNewBee

---

那么你的问题是什么？你是否遇到了异常？还是没有异常但系统卡住了……或者其他情况？ - Isaac

尝试在 https://snack.expo.io/ 上设置环境。 - Isaac

官方GitHub已经分享了使用此模块所需的所有代码，请您查看一下吗？https://github.com/sohobloo/react-native-modal-dropdown/blob/master/example/index.js - Isaac

你创建的代码片段中缺少太多 PNG 文件，因此我们无法提供帮助。请删除所有与问题无关的内容，并至少运行一次模拟器以确保能够模拟您的问题。 - Isaac

让我们在聊天中继续这个讨论。 - AndroidNewBee

Answer 1

我认为在React Native中打开模态框非常容易，以下是一个简单的示例：

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>
    );
  }
}

链接：https://facebook.github.io/react-native/docs/modal.html#docsNav

如果您想使用库：https://github.com/react-native-community/react-native-modal

- Hoàng Vũ Anh

---

非常感谢您的回复。 - AndroidNewBee

Answer 2

我按照@Issac在https://github.com/sohobloo/react-native-modal-dropdown/blob/master/example/index.js上给出的示例，并解决了问题。 以下是在按钮点击时展开模态下拉列表的代码：

 <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)}

            />

按下按钮的代码：

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

- AndroidNewBee

Answer 3

请查看以下模态演示链接
https://reactnativecode.com/react-native-modal-ios-android/

- Sandy.....