javascript 如何在反应原生中单击按钮时打开反应原生模式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50941538/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to open a react native modal on button click in react native?
提问by AndroidNewBee
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:-
我正在使用 react-native-modal-dropdown 进行模态。以下是我的按钮 jsx 代码：-
<Button onPress={() => this.openHeaderModal()} vertical>
<Image
style={{ marginTop: 20 }}
source={require("../assets/heading.png")}
/>
</Button>
Any help and support is appreciated. Thank you.
任何帮助和支持表示赞赏。谢谢你。
回答by Hoàng V? Anh
I think open a Modal in react-native very easy, simple example:
我认为在 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>
);
}
}
Link: https://facebook.github.io/react-native/docs/modal.html#docsNav
链接：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
如果你想使用库：https: //github.com/react-native-community/react-native-modal
回答by AndroidNewBee
I followed the example given by @Issac at https://github.com/sohobloo/react-native-modal-dropdown/blob/master/example/index.jsand solved the problem. Following is the code to inflate the Modal drop down on a button click:-
我按照@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)}
/>
code for the onPress of the button:-
按钮的 onPress 代码：-
<Button onPress={this._dropdown_5_show.bind(this)} vertical >
<Image style={{ marginTop: 20 }} style={{}} source={require("../assets/heading.png")} />
</Button>
回答by Sandy.....
Please find below link for modal demo
https://reactnativecode.com/react-native-modal-ios-android/
请在下面找到模态演示的链接
https://reactnativecode.com/react-native-modal-ios-android/
