como inserir quebra de linha na mensagem de alerta em react-native-awesome-alerts

Rama

Estou usando react-native-awesome-alerts em meu código. Na mensagem de alerta, quero quebrar o texto em uma nova linha

deve ser como a imagem abaixo

alerta

por favor me ajude como fazer isso

Aqui está meu código

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

});

Eu tentei 'Nome de usuário / senha incorretos usados ​​{“\ n”} Por favor, tente novamente…' mas ainda não tive sorte

por favor, deixe-me saber onde está errado

Mohammad Harith |

Você precisa alterar a string da mensagem para usar crase `e adicionar \ n. Isso deve funcionar agora.

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

Você também pode alterar a largura do contêiner para 80% e adicionar textAlign:"centre"ao textStyle CSS para que tenha uma aparência melhor.

Aqui está o que consegui produzir:

insira a descrição da imagem aqui

Este artigo é coletado da Internet.

Se houver alguma infração, entre em [email protected] Delete.

editar em
0

deixe-me dizer algumas palavras

0comentários
loginDepois de participar da revisão

Artigos relacionados

Como inserir uma quebra de linha em um componente <Text> no React Native?

Como inserir uma quebra de linha <br> na redução

Como inserir uma quebra de linha na função write () do módulo turtle em Python?

Como mostrar a mensagem em negrito e quebra de linha na caixa AlertDialog Android

DiagrammeR: Como inserir uma quebra de linha em um nó?

DiagrammeR: Como inserir uma quebra de linha em um nó?

PHP: Telegram Bot: inserir quebra de linha na mensagem de texto

Inserir quebra de linha na string

Quebra de linha do Laravel na mensagem

Quebra de linha do Laravel na mensagem

Nova linha na mensagem de alerta

como fazer a mensagem de exibição na página após clicar em confirmar alerta em react js

Como adiciono uma quebra de linha na minha mensagem SMS do Twilio?

Android Studio: como adicionar quebra de linha na mensagem git commit?

Como inserir uma quebra de linha em uma string VARCHAR / NVARCHAR do SQL Server

Inno Setup Como adicionar CRLF / quebra de linha em uma mensagem personalizada

Inserir quebra de linha a cada 3 linhas em javascript?

Como usar uma quebra de linha em uma caixa de diálogo de alerta / prompt no Google Apps Script?

& nbsp; causa quebra de linha em React

Substituição de texto globalmente com quebra de linha em React Native / Javascript

Como suprimir a mensagem de alerta de arquivo em uso

Como desativar a quebra de texto colado na linha de pesquisa

como inserir nova linha em uma string BASH já existente na linha de comando

Como converter a quebra de linha ^ M em quebra de linha 'normal' em um arquivo aberto no vim?

Como adicionar uma quebra de linha na legenda do Highchart em R?

Como forçar quebra de linha e string em negrito na célula dentro do KableExtra

Adicione uma quebra de linha na longa string em <li> React

Vim no git bash na janela (MINGW64) quebra automaticamente a linha na mensagem de confirmação

Como posso mostrar mensagem de alerta em node.js

TOP lista

quentelabel

Arquivo