这是官方的react-native模态文档,这是iOS和Android的live example。我如何添加一个可点击的背景覆盖,这是在我的看法和模式?
oxcyiej71#
你可以用一个可触摸的不透明来 Package 模态内容,并使用背景来设计它。我编辑了文档中给出的示例。
<Modal animationType="slide" transparent={true} visible={modalVisible} onRequestClose={() => { Alert.alert('Modal has been closed.'); }}> <TouchableOpacity style={{ backgroundColor: 'black', flex: 1,justifyContent:'center' }} onPress={() => setModalVisible(!modalVisible)}> <View style={styles.modalView}> <Text style={styles.modalText}>Hello World!</Text> <TouchableHighlight style={{ ...styles.openButton, backgroundColor: '#2196F3' }} onPress={() => { setModalVisible(!modalVisible); }}> <Text style={styles.textStyle}>Hide Modal</Text> </TouchableHighlight> </View> </TouchableOpacity> </Modal>
8nuwlpux2#
ReactNativeElements有一个很棒的组件Overlay,它可以解决你的问题,这周早些时候它拯救了我,唯一的问题是它是一个更大的库的一部分。https://react-native-elements.github.io/react-native-elements/docs/overlay.html
Overlay
deikduxw3#
我认为如果背景和模态之间的分离对你的项目来说并不重要,你可以这样处理:
<Modal animationType="slide" transparent={true} style={{ width: '100%', alignSelf: 'center', height: '100%', justifyContent: 'flex-start' }} visible={this.state.modalVisible} onRequestClose={() => { // Do smth }}> <TouchableWithoutFeedback style={{ flex: 1 }} onPress={() => { // Do the backdrop action }}> <View style={{ backgroundColor: '#fff', flex: 1, width: '80%', height: '50%' }} > <Text> Your content </Text> </View> </TouchableWithoutFeedback> </Modal>
z9zf31ra4#
<Modal animationType="slide" transparent={true} visible={modalVisible} onRequestClose={() => { Alert.alert('Modal has been closed.'); }}> // Touchable Opacity <TouchableOpacity style={{ position: 'absolute' , flex: 1 }} onPress={() => setModalVisible(!modalVisible)} /> <View style={styles.modalView}> // Other.. <View> design </View> </Modal>
4条答案
按热度按时间oxcyiej71#
你可以用一个可触摸的不透明来 Package 模态内容,并使用背景来设计它。我编辑了文档中给出的示例。
8nuwlpux2#
ReactNativeElements有一个很棒的组件
Overlay
,它可以解决你的问题,这周早些时候它拯救了我,唯一的问题是它是一个更大的库的一部分。https://react-native-elements.github.io/react-native-elements/docs/overlay.html
deikduxw3#
我认为如果背景和模态之间的分离对你的项目来说并不重要,你可以这样处理:
z9zf31ra4#