Estoy trabajando en una aplicación de reacción. Tiene funciones de autenticación simples. El problema es que después de que un usuario se registra, se ve obligado a esperar de 6 a 9 segundos antes de que se cargue la página de destino.
Por ese motivo, quiero agregar una barra de progreso como ventana emergente después de que el usuario haga clic en el botón REGISTRARSE para notificarle que la página se está cargando.
const handlePress = () => { if (!firstName) { Alert.alert("First Name is required"); } else if (!phone) { Alert.alert("Phone Number is required."); } else if (!email) { Alert.alert("Email Field is required."); } else if (!password) { Alert.alert("Password Field is required."); } else { registration(email, password, phone, firstName); navigation.navigate("Welcome"); emptyState(); } }; <TouchableOpacity style={styles.button} onPress={handlePress}> <Text style={{ fontWeight: "bold", color: "#fff", fontSize: 18 }}> {" "} Sign Up </Text> </TouchableOpacity>Alguien Ayuda. Relativamente nuevo para reaccionar y JS.
Si desea una barra de progreso, la función de registro necesitará alguna modificación. Necesitará un parámetro adicional onProgress . También deberá realizar un seguimiento del porcentaje de finalización y actualizar este porcentaje cada vez que se alcance un hito:
function registration(email, password, phone, firstName, onProgress){ let progress = 0; const updateProgress = newVal=>{ progress+=newVal; onProgress(progress) } // when a milestone is reached call updateProgress eg // connected to auth service updateProgress(0.2); // verified user email doesnt exist updateProgress(0.1) // createdNewUser updateProgress(0.7) */ }Ahora desea crear una variable de progreso y elegir su componente de barra de progreso
import * as Progress from 'react-native-progress'; export default function App({navigation}){ const [ progress, setProgress ] = useState(0); const [ isLoading, setIsLoading ] = useState(false); const handlePress = () => { if (!firstName) { Alert.alert("First Name is required"); } else if (!phone) { Alert.alert("Phone Number is required."); } else if (!email) { Alert.alert("Email Field is required."); } else if (!password) { Alert.alert("Password Field is required."); } else { setIsLoading(true); registration(email, password, phone, firstName, setProgress). then(()=>{ setIsLoading(false) }) navigation.navigate("Welcome"); emptyState(); } }; return( <TouchableOpacity style={styles.button} onPress={handlePress}> <Text style={{ fontWeight: "bold", color: "#fff", fontSize: 18 }}> {" "} Sign Up </Text> {isLoading && <Progress.Bar progress={progress} />} </TouchableOpacity> )Pruébalo aquí