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
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
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:
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras