{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 孤傲高冷的网名 的问题《react-native-modalbox stuck in child component con》','https://www.manongdao.com/q-1126960.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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.
modal:
code:
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
}
}
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