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.
Share Improve this question edited Jun 20, 2018 at 9:02 Jee Mok 6,5668 gold badges53 silver badges83 bronze badges asked Jun 20, 2018 at 6:24 AndroidNewBeeAndroidNewBee 7443 gold badges12 silver badges37 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
3 Answers
Reset to default 2I 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
版权声明:本文标题:javascript - How to open a react native modal on button click in react native? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1741971216a2407848.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论