Cambiar el texto de un Text en React Native

Si queremos cambiar el contenido de un Text utilizando React Native (hacer un setText) podemos utilizar el siguiente código que voy a explicar.

//imports necesarios, vamos a utilizar useState
import React, { useState } from "react";
import {Text, Button} from "react-native";

//Crear la vista
const App = () => {
    //Estados para actualizar textos:
    const [texto, setText] = useState("Hola Mundo");
    
    //Funcion del boton
    function cambiarTexto(){
      setText("Hola React");
    }
 
    return (
            //Texto 
            <Text>{textoInicio}</Text>
            //Boton
            <Button onPress={cambiarTexto} >Cambiar Texto</Button>
           )
};

Ahora voy a explicar el código.

Primero se crea una constante de estados, primero indica el parámetro con el texto (texto) y el segundo atributo (setText) es la función para cambiar el texto. El useState, contiene el valor por defecto en este caso «Hola Mundo».

Luego he creado una función para utilizar con el botón:

function cambiarTexto(){
  setText("Hola React");
}

Aquí dentro, se llama a la función que hemos creado anteriormente llamada setText.

Ahora se asigna el texto al componente text de React Native.

<Text>{textoInicio}</Text>

Al pasar textoInicio, se le pasa la variable y cambiará cuando se llame a setText.

Ahora se crea un botón y se asigna la acción de cambiar el texto con el método onPress.

        <Button onPress={cambiarTexto} >Cambiar Texto</Button>

isMa

Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor y poeta. Más de 20 APPs publicadas y un libro en Amazon.