リアクションネイティブのテキストオーバーフロー。 （反応 - ネイティブモード）

Question

これはあなたのユーザー名とパスワードが正しいかどうかを示すログイン画面とモーダルです。

This is screen shot!

ご覧のとおり、テキストは私の画面をオフに起こっています。これをどうすれば解決できますか？

_renderModelは通常のビューからラップされています。それは厄介に見えるが、それは簡単だ。これはスタイルシート階層です。

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