在反应天然莫代尔底部菜单
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在反应天然莫代尔底部菜单相关的知识,希望对你有一定的参考价值。
答案
你可以设置的backgroundColor: 'RGBA(0,0,0,0.2)'。
<Modal
animationType={"slide"}
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {alert("Modal has been closed.")}}
>
<View style={{flex: 1,backgroundColor: 'rgba(0,0,0,0.2)'}}>
<View style ={{flex:1, alignItems: 'center', justifyContent: 'center'}}>
<View style={{backgroundColor: '#ffffff', width: 300, height: 300}}>
<Text>Hello World!</Text>
</View>
<TouchableHighlight
style={{backgroundColor: '#ffffff', width: 300, height: 40, marginTop: 40}}
onPress={() => {this.setModalVisible(!this.state.modalVisible)}}
>
<Text>Hide Modal</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
另一答案
对于ios具体有一个组件调用ActionSheetIOS,你可以这样调用:
ActionSheetIOS.showActionSheetWithOptions(
{
options: ["Cancel", ...options],
title: "Select something",
message: "Some description",
cancelButtonIndex: 0
},
index => {
// do something with the selected index
const listIndex = index - 1;
if (index > 0) {
this.setState({ selectedIndex: listIndex });
}
}
);
另一答案
只有在iOS版
import { StyleSheet, Text, ActionSheetIOS } from "react-native";
...
OptionButton() {
let BUTTONS = ["Compartir", "Reportar", "Cancel"];
ActionSheetIOS.showActionSheetWithOptions(
{
title: "Opciones",
tintColor: "#242424",
options: BUTTONS,
cancelButtonIndex: 2,
destructiveButtonIndex: 1
},
buttonIndex => {
switch (buttonIndex) {
case 0:
this.shareImage();
break;
case 1:
this.reportImage();
break;
}
}
);
}
以上是关于在反应天然莫代尔底部菜单的主要内容,如果未能解决你的问题,请参考以下文章