Question

我正在使用react-native-modalbox。根据下图中的阴影区域判断，我的模型卡在其内部组件的上下文中。不是整个应用程序。有没有办法让模态认为它是在根组件级别？我尝试了zIndex:500这不起作用。

模态：

代码：

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
  }
}

Answer 1

父视图的样式为'formItem'，其唯一样式为'marginBottom：10'。没有任何迹象表明该视图可以填满整个屏幕，因此它的大小适合其孩子。为视图提供'absoluteFill'样式，以便填充屏幕https://til.hashrocket.com/posts/202dfcb6c4-absolute-fill-component-in-react-native

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

1 个答案: