React Native中的文本溢出。(react-native-modal)

Question

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

This is screen shot!

如您所见，文本将从my屏幕上消失。我该如何解决这个问题呢？

_renderModel是从普通视图包装而来的。这看起来很糟糕，但其实很简单。这是Stylesheets层次结构。

modalStyle -> modalContainer -> 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'
  },