如何在 React Native 中打开半模态?
How to open half modal in react native?
我正在创建一个 React Native 应用程序,我使用 React-Native 模态组件打开一个模态,我可以使用以下代码打开一个完整的模态。我在下面提到了我的代码示例。现在我想打开一个半模态。
这是我试过的。
import React from 'react';
import {
StyleSheet,
Text,
View,
ScrollView,
TouchableOpacity,
TextInput,
Image,
Modal,
} from 'react-native';
export default class Test extends React.Component {
constructor(props) {
super(props);
this.state = {
modalVisible: false,
};
}
setModalVisible(visible) {
this.setState({modalVisible: visible});
}
render() {
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerText}>Test Half Modal</Text>
<TouchableOpacity
style={styles.addButton}
onPress={() => {
this.setModalVisible(true);
}}>
<Text style={styles.addButtonText}>Open</Text>
</TouchableOpacity>
</View>
<Modal
animationType="slide"
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {
// this.closeButtonFunction()
}}>
<View style={styles.footer}>
<Text style={styles.headerText}>This is Half Modal</Text>
</View>
<TouchableOpacity
style={styles.addButton}
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}>
<Text style={styles.addButtonText}>Close</Text>
</TouchableOpacity>
</Modal>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#98B3B7',
justifyContent: 'center',
},
header: {
flexDirection: 'row',
alignItems: 'center',
},
headerText: {
color: 'black',
fontSize: 18,
padding: 26,
},
noteHeader: {
backgroundColor: '#42f5aa',
alignItems: 'center',
justifyContent: 'center',
borderTopLeftRadius: 50,
borderTopRightRadius: 50,
},
footer: {
flex: 1,
backgroundColor: '#ddd',
bottom: 0,
left: 0,
right: 0,
zIndex: 10,
},
textInput: {
alignSelf: 'stretch',
color: 'black',
padding: 20,
backgroundColor: '#ddd',
borderTopWidth: 2,
borderTopColor: '#ddd',
},
},
addButton: {
position: 'absolute',
zIndex: 11,
right: 20,
bottom: 90,
backgroundColor: '#98B3B7',
width: 70,
height: 70,
borderRadius: 35,
alignItems: 'center',
justifyContent: 'center',
elevation: 8,
},
addButtonText: {
color: '#fff',
fontSize: 18,
},
});
使用上面的代码我可以打开一个完整的模式。如何使用某些样式或其他方式打开半模态?
我也遇到了同样的问题,我想出了这个
这里的关键是让outer View的flex为0.5
<Modal
isVisible={modal}
style={{ justifyContent: 'flex-end', margin: 0 }}
onBackdropPress={() => this.setState({ modal: false })}>
<View style={{ flex: 0.5, backgroundColor: 'white',justifyContent: 'space-around', alignItems: 'center' }}>
</View>
</Modal>
您将需要一个包装视图来显示您的模态内容,并且由于您计划只显示一半的屏幕,因此您必须将其设为透明。更新模态代码如下。我将背景颜色设置为蓝色,您可以根据需要更改它。高度设置为你想要的一半的 50%,marginTop 设置为自动,这会将它移动到屏幕的下半部分。
<Modal
animationType="slide"
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => {
// this.closeButtonFunction()
}}>
<View
style={{
height: '50%',
marginTop: 'auto',
backgroundColor:'blue'
}}>
<View style={styles.footer}>
<Text style={styles.headerText}>This is Half Modal</Text>
</View>
<TouchableOpacity
style={styles.addButton}
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}>
<Text style={styles.addButtonText}>Close</Text>
</TouchableOpacity>
</View>
</Modal>
你可以这样做:
<Modal isVisible={true}
swipeDirection={['up', 'left', 'right', 'down']}
style={styles.modalView}
>
<View style={styles.containerStyle}>
<View style={styles.content}>
/**The rest of your code goes here **/
</View>
</View>
</Modal>
并按如下样式设置
modalView: {
margin: 0,
justifyContent: 'flex-end'
},
containerStyle: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'flex-end'
},
content: {
width: '95%',
height: '50%',
backgroundColor: 'white',
overflow: 'hidden',
},
注意:这里的关键是使用modalView
样式让modal从下往上定位和展开
我正在创建一个 React Native 应用程序,我使用 React-Native 模态组件打开一个模态,我可以使用以下代码打开一个完整的模态。我在下面提到了我的代码示例。现在我想打开一个半模态。
这是我试过的。
import React from 'react';
import {
StyleSheet,
Text,
View,
ScrollView,
TouchableOpacity,
TextInput,
Image,
Modal,
} from 'react-native';
export default class Test extends React.Component {
constructor(props) {
super(props);
this.state = {
modalVisible: false,
};
}
setModalVisible(visible) {
this.setState({modalVisible: visible});
}
render() {
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerText}>Test Half Modal</Text>
<TouchableOpacity
style={styles.addButton}
onPress={() => {
this.setModalVisible(true);
}}>
<Text style={styles.addButtonText}>Open</Text>
</TouchableOpacity>
</View>
<Modal
animationType="slide"
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {
// this.closeButtonFunction()
}}>
<View style={styles.footer}>
<Text style={styles.headerText}>This is Half Modal</Text>
</View>
<TouchableOpacity
style={styles.addButton}
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}>
<Text style={styles.addButtonText}>Close</Text>
</TouchableOpacity>
</Modal>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#98B3B7',
justifyContent: 'center',
},
header: {
flexDirection: 'row',
alignItems: 'center',
},
headerText: {
color: 'black',
fontSize: 18,
padding: 26,
},
noteHeader: {
backgroundColor: '#42f5aa',
alignItems: 'center',
justifyContent: 'center',
borderTopLeftRadius: 50,
borderTopRightRadius: 50,
},
footer: {
flex: 1,
backgroundColor: '#ddd',
bottom: 0,
left: 0,
right: 0,
zIndex: 10,
},
textInput: {
alignSelf: 'stretch',
color: 'black',
padding: 20,
backgroundColor: '#ddd',
borderTopWidth: 2,
borderTopColor: '#ddd',
},
},
addButton: {
position: 'absolute',
zIndex: 11,
right: 20,
bottom: 90,
backgroundColor: '#98B3B7',
width: 70,
height: 70,
borderRadius: 35,
alignItems: 'center',
justifyContent: 'center',
elevation: 8,
},
addButtonText: {
color: '#fff',
fontSize: 18,
},
});
使用上面的代码我可以打开一个完整的模式。如何使用某些样式或其他方式打开半模态?
我也遇到了同样的问题,我想出了这个 这里的关键是让outer View的flex为0.5
<Modal
isVisible={modal}
style={{ justifyContent: 'flex-end', margin: 0 }}
onBackdropPress={() => this.setState({ modal: false })}>
<View style={{ flex: 0.5, backgroundColor: 'white',justifyContent: 'space-around', alignItems: 'center' }}>
</View>
</Modal>
您将需要一个包装视图来显示您的模态内容,并且由于您计划只显示一半的屏幕,因此您必须将其设为透明。更新模态代码如下。我将背景颜色设置为蓝色,您可以根据需要更改它。高度设置为你想要的一半的 50%,marginTop 设置为自动,这会将它移动到屏幕的下半部分。
<Modal
animationType="slide"
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => {
// this.closeButtonFunction()
}}>
<View
style={{
height: '50%',
marginTop: 'auto',
backgroundColor:'blue'
}}>
<View style={styles.footer}>
<Text style={styles.headerText}>This is Half Modal</Text>
</View>
<TouchableOpacity
style={styles.addButton}
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}>
<Text style={styles.addButtonText}>Close</Text>
</TouchableOpacity>
</View>
</Modal>
你可以这样做:
<Modal isVisible={true}
swipeDirection={['up', 'left', 'right', 'down']}
style={styles.modalView}
>
<View style={styles.containerStyle}>
<View style={styles.content}>
/**The rest of your code goes here **/
</View>
</View>
</Modal>
并按如下样式设置
modalView: {
margin: 0,
justifyContent: 'flex-end'
},
containerStyle: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'flex-end'
},
content: {
width: '95%',
height: '50%',
backgroundColor: 'white',
overflow: 'hidden',
},
注意:这里的关键是使用modalView
样式让modal从下往上定位和展开