react-native-modalbox卡在子组件上下文中 [英] react-native-modalbox stuck in child component context
问题描述
我正在使用 react-native-modalbox .从下图中的黑色阴影区域来看，我的模型被卡在内部组件的上下文中.不是整个应用程序.有没有办法使模态认为它是在根组件级别上?我试过了zIndex:500这是行不通的.
I'm using react-native-modalbox. Judging by the dark shaded area in the image below, my model is stuck in the context of the component that it is inside. Not the whole app. Is there a way to make the modal think it is at the root component level? I have tried zIndex:500 which doesn't work.
模式:
代码:
let Categories = (props) => (
<View style={styles.formItem}>
<List style={styles.list} dataArray={props.categories}
renderRow={(item) =>
<ListItem icon onPress={() => props.toggleShowSubcategories(item)}>
<Left>
<Icon
style={styles.icon}
name={item.icon}
size={20}
color={item.iconColor} />
</Left>
<Body>
<Text style={styles.label}>{item.label}</Text>
</Body>
<Right>
<Icon style={styles.arrow} name="angle-right" size={20} />
</Right>
</ListItem>
}>
</List>
<Modal
style={[styles.modal, styles.modal3]}
position={'center'}
isOpen={props.categories.some(x => showModal(x))}>
<Text style={styles.text}>Modal centered</Text>
<Button
onPress={() => props.setAllShowSubcategoriesToFalse()}
style={styles.btn}><Text>Close</Text></Button>
</Modal>
</View>
)
Categories.propTypes = {
categories: React.PropTypes.array.isRequired,
toggleSubcategory: React.PropTypes.func.isRequired,
toggleShowSubcategories: React.PropTypes.func.isRequired,
setAllShowSubcategoriesToFalse: React.PropTypes.func.isRequired
}
Categories = connect(
mapStateToProps,
mapDispatchToProps
)(Categories)
export default Categories
const styles = {
list: {
flex: 1,
backgroundColor: '#FFFFFF',
borderRadius: 8
},
label: {
color: '#9E9E9E',
fontWeight: '200'
},
formItem: {
marginBottom: 10
},
icon: {
width: 30
},
header: {
backgroundColor: '#F7F7F7',
},
arrow: {
color: '#9E9E9E'
},
modalView: {
flex: 1,
backgroundColor: '#FFFFFF',
borderRadius: 8,
},
title: {
color: '#9E9E9E',
fontWeight: '200'
},
wrapper: {
paddingTop: 50,
flex: 1
},
modal: {
justifyContent: 'center',
alignItems: 'center',
zIndex: 500
},
modal3: {
height: 500,
width: 300,
backgroundColor: 'red',
zIndex: 500
},
btn: {
margin: 10,
backgroundColor: '#3B5998',
color: 'white',
padding: 10
},
btnModal: {
position: 'absolute',
top: 0,
right: 0,
width: 50,
height: 50,
backgroundColor: 'transparent'
},
text: {
color: 'black',
fontSize: 22
}
}
推荐答案
父视图具有样式"formItem"，唯一样式是"marginBottom:10".没有任何内容告诉视图填充整个屏幕，因此其大小适合其子级.为视图提供绝对填充"样式，以便在屏幕上填充
The parent view has the style 'formItem' who's only styling is 'marginBottom:10'. There's nothing telling that view to fill the entire screen so it is sized to fit its children. Give the view the 'absoluteFill' style so that if fills the screen https://til.hashrocket.com/posts/202dfcb6c4-absolute-fill-component-in-react-native
这篇关于react-native-modalbox卡在子组件上下文中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
