React Native中的文本溢出。 （反应天然模态）

Question

这是登录屏幕和模式，显示您的用户名和密码是否正确。

This is screen shot!

如您所见，文字正在关闭我的屏幕。我怎样才能解决这个问题？

_renderModel包含在普通视图中。它看起来很讨厌，但很简单。这是Stylesheets Hierarchy。

modalStyle - ＆gt; modalContainer - ＆gt; modalTitleTextContainer，modalContentTextContainer，modalButtonContainer。

任何提示??

  _renderModal = () => {
    return (
      <Container>
        <Modal isVisible={this.state.isModalVisible}>
          <View style={styles.modalContainer}>
            <View style={styles.modalTitleTextContainer}>
              <Text style={styles.modalTitleText}>{this.props.errorMsg}</Text>
            </View>
            <View style={styles.modalContentTextContainer}>
              <Text style={styles.modalContentText}>{`It looks like ${this.state.username} doesn't match an existing account. If you don't have a Stylee account, you can create one now `}</Text>
            </View>
            <View style={styles.modalButtonContainer}>
              <Button transparent onPress={this._hideModal}>
                <Text style={styles.modalText}>Find Account</Text>
              </Button>
              <Button transparent onPress={this._hideModal}>
                <Text style={styles.modalText}>Try Again</Text>
              </Button>
            </View>
          </View>
        </Modal>
      </Container>
    );
  }

这是我的样式表部分。

  modalContainer: {
    justifyContent: 'center',
    backgroundColor: 'white',
    width: width(100),
    height: height(30),
    padding: totalSize(2)
  },
  modalTitleText: {
    fontSize: totalSize(3),
    flex: 1
  },
  modalContentText: {
    fontSize: totalSize(2)
  },
  modalButtonText: {
    fontSize: totalSize(2)
  },
  modalButtonContainer: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
  },
  modalTitleTextContainer: {
    flex:1
  },
  modalContentTextContainer: {
    flex:1
  }

如果有任何不清楚的地方，我会来这里编辑这篇文章。谢谢:)）

Answer 1

我放错了宽度:(

现在工作正常。

modalContainer: {
    justifyContent: 'center',
    backgroundColor: 'white',
    width: width(90),
    height: height(30),
    padding: 10,
    flexWrap: 'wrap'
  },