react-native - 为什么我的模态高度占据了屏幕的一半？

Question

我的模式 - noDevicesModalContainer - 占用了大量的屏幕，我不知道为什么。

我对 React Native 和 Web 开发很陌生，所以请不要害怕过度解释！

预先感谢您的建议。

class DevicesEmptyScreen extends Component {
  render() {
    return (
      <View style={styles.screen}>
        <View style={styles.noDevicesImage}>
          <Image
            source={require('./../../../android/app/src/main/res/drawable/no_devices.png')}
          />
        </View>

        <View style={styles.noDevicesTextContainer}>
          <Text style={styles.noDevicesText}>You do not have any devices yet</Text>
        </View>

        <View style={styles.noDevicesModalContainer}>
          <Text style={[styles.noDevicesText, styles.noDevicesModalText]}>
            In case no devices have been assigned, please contact your administrator
          </Text>
        </View>
      </View>
    )
  }
}

export default DevicesEmptyScreen

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  noDevicesImage: {
    flex: 1,
    marginTop: 40
  },
  noDevicesTextContainer: {
    flex: 1,
    justifyContent: 'center'
  },
  noDevicesText: {
    color: '#89C7C8',
    padding: 10
  },
  noDevicesModalContainer: {
    flex: 1,
    backgroundColor: '#EBF5F6',
    borderRadius: 10,
    marginHorizontal: 30,
    marginVertical: 30
  },
  noDevicesModalText: {
    marginLeft: 20
  }
})

标签： react-native

Answer 1

根据模态文档。尝试这个

<Modal transparent={true}
       visible={this.state.isVisible}
       onRequestClose={this.closeModal}>
  <View style={{
          flex: 1,
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center'}}>
    <View style={{
            width: 300,
            height: 300}}>
      ...
    </View>
  </View>
</Modal>