Question

我是新来的响应本机的人，我想在单击按钮时打开一个模式。我正在尝试使用以下代码打开模式：-

  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>

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

Answer 1

我认为在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

Answer 2

我遵循了{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>

Answer 3

请在下面找到模态演示的链接
https://reactnativecode.com/react-native-modal-ios-android/

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

3 个答案: