如何在 react-native-awesome-alerts 中的警报消息中插入换行符答案

【问题标题】：how insert line break in alert message in react-native-awesome-alerts如何在 react-native-awesome-alerts 中的警报消息中插入换行符
【发布时间】：2019-06-12 10:31:31
【问题描述】：

我在我的代码中使用 react-native-awesome-alerts。在警报消息中，我想将文本分成新行

应该如下图所示

alert

请帮我看看怎么做

这是我的代码

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

});

我尝试了“使用的用户名/密码不正确{“\n”}请再试一次...'，但仍然没有成功

请告诉我哪里出了问题

【问题讨论】：

嗨 Rama，欢迎来到 Stack Overflow。您的问题暗示困难在于添加换行符。你可以发布你的代码来创建没有换行符的警报吗？还要说明您为添加换行符所做的尝试。

标签： react-native

【解决方案1】：

您可以添加一个宽度为 80% 的视图，并将 textAlign: "centre" 添加到 AwesomeAlert messageStyle 以使其看起来更好。

<View style={{ width: '80%' }}>
   <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>

【讨论】：

【解决方案2】：

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

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

您还可以将容器宽度更改为 80%，并将 textAlign:"centre" 添加到 textStyle CSS 中，使其看起来更好。

这是我设法制作的：

【讨论】：

不幸的是它没有帮助