React native 如何在react本机警报中插入换行警报消息

我在代码中使用了react-native Aweasome警报。 在警报消息中，我想将文本拆分为新行

应该如下图所示

请帮我怎么做

这是我的密码

import React, { Component } from 'react';
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
import AwesomeAlert from 'react-native-awesome-alerts';

export default class Alert extends Component {

  constructor(props) {
    super(props);
    this.state = { showAlert: false };
  }

  showAlert = () => {
    this.setState({
      showAlert: true
    });
  };

  hideAlert = () => {
    this.setState({
      showAlert: false
    });
  };

  render() {
    const { showAlert } = this.state;

    return (
      <View style={styles.container}>

        <Text>I'm AwesomeAlert</Text>
        <TouchableOpacity onPress={() => {
          this.showAlert();
        }}>
          <View style={styles.button}>
            <Text style={styles.text}>Try me!</Text>
          </View>
        </TouchableOpacity>

        <AwesomeAlert
          show={showAlert}
          showProgress={false}
          message='Incorrect Username/Password Used{“\n”}Please try again…'
          messageStyle={styles.textStyle}
          closeOnTouchOutside={true}
          closeOnHardwareBackPress={false}
          contentContainerStyle={styles.alertStyle}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  button: {
    margin: 10,
    paddingHorizontal: 10,
    paddingVertical: 7,
    borderRadius: 5,
    backgroundColor: '#AEDEF4',
  },
  text: {
    color: '#fff',
    fontSize: 15
  },
  alertStyle: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white', 
    height: 100,
    width: '60%',
    borderWidth: 1,
    borderColor: '#fff',
    borderRadius: 7,
    color: 'red'
  },
  textStyle: {
      fontSize: 14,
      color: 'black',
      alignItems: 'center'
  }

});

import React，{Component}来自'React'；
从“react native”导入{样式表、视图、文本、TouchableOpacity}；
从“react native AwesomeAlerts”导入AwesomeAlert；
导出默认类警报扩展组件{
建造师（道具）{
超级（道具）；
this.state={showarert:false}；
}
showAlert=（）=>{
这是我的国家({
showAlert：对
});
};
hideAlert=（）=>{
这是我的国家({
showAlert:错误
});
};
render（）{
const{showAlert}=this.state；
返回(
我非常警觉
{
this.showart（）；
}}>
试试我！
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”，
背景颜色：“#fff”，
},
按钮：{
差额：10，
水平方向：10，
填充垂直：7，
边界半径：5，
背景颜色：“#AEDEF4”，
},
正文：{
颜色：“#fff”，
尺寸：15
},
警报样式：{
对齐项目：“居中”，
为内容辩护：“中心”，
背景颜色：“白色”，
身高：100，
宽度：“60%”，
边框宽度：1，
边框颜色：“#fff”，
边界半径：7，
颜色：“红色”
},
文本样式：{
尺寸：14，
颜色：'黑色'，
对齐项目：“中心”
}
});

我尝试了“使用了错误的用户名/密码{“\n”}请再试一次…”，但仍然没有成功

---

请告诉我哪里出了问题

您需要将消息字符串更改为使用backtick`并添加\n。现在应该可以了

message={`Incorrect Username/Password Used \n Please try again…`}

您还可以将容器宽度更改为80%，并将

textAlign:“center”

添加到textStyle CSS中，使其看起来更好

以下是我设法制作的：

---

你好，Rama，欢迎来到Stack Overflow。你的问题意味着困难在于添加换行符。您可以发布代码，创建不带换行符的警报吗？同时也要说明你在添加换行符时做了哪些尝试。不幸的是，这没有帮助