问如何在react native中点击按钮打开react native模式？
EN

Stack Overflow用户

提问于 2018-06-20 06:24:15

回答 3查看 21.1K关注 0票数 2

我是新的反应原生，我正在尝试打开一个模式的按钮点击。我正在尝试使用以下代码打开模式：

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

我对modal使用了react-native-modal dropdown。以下是我为buton编写的jsx代码：

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

任何帮助和支持都是非常感谢的。谢谢。

onclick

modal-dialog

javascript

reactjs

react-native

人脸核身产品特惠

用户政务民生、金融、通信运营商等场景，接入全面，安全可靠新用户3折起

回答 3

Stack Overflow用户

发布于 2018-06-20 06:57:01

我认为在react-native中打开一个Modal非常简单，简单的例子：

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

票数 2

Stack Overflow用户

发布于 2018-06-20 09:11:01

我遵循了@Issac在https://github.com/sohobloo/react-native-modal-dropdown/blob/master/example/index.js给出的例子并解决了这个问题。以下是在单击按钮时放大Modal下拉菜单的代码：

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

            />

按钮的onPress代码：-

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