Javascript react native modalbox卡在子组件上下文中_Javascript_Css_Reactjs_React Native_Modal Dialog

Javascript react native modalbox卡在子组件上下文中

javascript css reactjs react-native

Javascript react native modalbox卡在子组件上下文中,javascript,css,reactjs,react-native,modal-dialog,Javascript,Css,Reactjs,React Native,Modal Dialog,我正在使用。从下图中的阴影区域判断，我的模型被卡在它所在组件的上下文中。不是整个应用程序。有没有一种方法可以让模态认为它位于根组件级别？我试过zIndex:500，但不起作用模态：代码： let Categories=（道具）=>( 道具.切换显示子类别（项目）}> {item.label} }> showModal（x））}> 模态中心 props.setAllShowSubcategoriesToFalse（）} style={styles.btn}>关闭 ) Categories.

我正在使用。从下图中的阴影区域判断，我的模型被卡在它所在组件的上下文中。不是整个应用程序。有没有一种方法可以让模态认为它位于根组件级别？我试过zIndex:500，但不起作用

模态：

代码：

let Categories=（道具）=>(
道具.切换显示子类别（项目）}>
{item.label}
}>
showModal（x））}>
模态中心
props.setAllShowSubcategoriesToFalse（）}
style={styles.btn}>关闭
)
Categories.propTypes={
类别：React.PropTypes.array.isRequired，
切换子类别：React.PropTypes.func.isRequired，
切换显示子类别：React.PropTypes.func.isRequired，
SetAllShowSubcategories设置为false:React.PropTypes.func.isRequired
}
类别=连接(
MapStateTops，
mapDispatchToProps
)（类别）
导出默认类别
常量样式={
名单：{
弹性：1，
背景颜色：“#FFFFFF”，
边界半径：8
},
标签：{
颜色：“#9E9E9E”，
重量：'200'
},
formItem：{
marginBottom:10
},
图标：{
宽度：30
},
标题：{
背景颜色：“#F7F7F7”，
},
箭头：{
颜色：“#9E9E9E”
},
莫达尔维：{
弹性：1，
背景颜色：“#FFFFFF”，
边界半径：8，
},
标题：{
颜色：“#9E9E9E”，
重量：'200'
},
包装器：{
paddingTop:50，
弹性：1
},
模态：{
为内容辩护：“中心”，
对齐项目：“居中”，
zIndex:500
},
模式3：{
身高：500，
宽度：300，
背景颜色：“红色”，
zIndex:500
},
btn:{
差额：10，
背景颜色：“#3B5998”，
颜色：'白色'，
填充：10
},
btnModal：{
位置：'绝对'，
排名：0，
右:0,，
宽度：50，
身高：50，
背景颜色：“透明”
},
正文：{
颜色：'黑色'，
尺寸：22
}
}

父视图的样式为“formItem”，其唯一的样式为“marginBottom:10”。没有任何东西可以告诉视图填充整个屏幕，使其大小适合其子对象。为视图提供“绝对填充”样式，以便if填充屏幕

谢谢。这只是给了它一个

位置：绝对的它不起作用。也许值得举一个例子来说明你的问题，它类似于jsfiddle for React。这样，人们就可以使用您的代码来尝试使其工作。
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
  }
}