如何在react native中点击按钮打开react native模式？
如何在react native中点击按钮打开react native模式？
提问于 2018-06-20 06:24:15
我是新的反应原生，我正在尝试打开一个模式的按钮点击。我正在尝试使用以下代码打开模式：
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>任何帮助和支持都是非常感谢的。谢谢。
回答 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
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>Stack Overflow用户
发布于 2018-06-20 10:29:04
请找到下面的链接以查看模式演示
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50941538
复制相关文章
相似问题
腾讯云开发者
