希望应用程序在用户通过测试后保存通过的屏幕，即使应用程序在本机反应中退出也是如此

Question

我正在尝试构建一个学习应用程序，用户可以在其中学习一项技能，然后对其进行一定的测试。我遇到的问题是，一旦用户通过了测试，我希望应用程序始终显示通过的屏幕。意思是，我不希望应用程序在用户每次打开应用程序时都显示测试屏幕，而是一旦测试通过，应用程序应该在那里永久存储通过状态。我不知道该怎么做！有人帮忙就太好了！

这是代码片段：

export default test =({navigation}) => { 


  const [index, setind] = useState(0);
  const [idis, setidis] = useState(false);
  const [count, setcount] = useState(0);
  const [error, setError] = useState('');
  const [results, setResults] = useState('');
  const [disb, setdis] = useState(true);
  const [ndisb, setndis] = useState(true);

 useEffect(() => {
   //Setting callbacks for the process status
   Voice.onSpeechStart = onSpeechStart;
   Voice.onSpeechEnd = onSpeechEnd;
   Voice.onSpeechResults = onSpeechResults;
   Voice.onSpeechError = onSpeechError;

   return () => {
    //destroy the process after switching the screen
    Voice.destroy().then(Voice.removeAllListeners);
   
    
  };
}, []);

测试检查函数

function Check() {
  if (results.includes(words[index])){
   // console.log(index);
    Alert.alert('Correct!','You are learning so well!');
    
     if(index==7) {
      if(count<5)
      {
            //  Alert.alert('pass','pass');
            // showing passing screen in the form of a modal
            setshowpass(true);
      }
      else{
        Alert.alert('fail','fail');
      }
    }
    if (index==7){
      setndis(true);
      setdis(true);
      setidis(true);
    }
    else{
   setndis(false);
   setdis(true);
   setidis(true);
    }
   
  }
  else{
    Alert.alert('Ops!','Looks like you went wrong somewhere. Try again!');
    setcount(count+1);
    console.log('uc',count);
    setdis(true);
    setndis(true);
   
    if(count==5){
      Alert.alert('Restest', 'Looks like you had way too many mistakes!')
      setind(0);
      setcount(0);
      setdis(true);
    }
  }
}




     const words=['word1', 'wor2', 'word3', 'word4', 'wrd5', 'word6', 'wor7', 'w8'];
      
      
        const [showpass, setshowpass]=useState(false);

return (
    <View style={styles.body}
    >

        <Modal
          transparent={false}
          visible={showpass}
         animationType='slide'
          hardwareAccelerated 
          >
            <View style={styles.body}>
              <Text style={styles.toptext}>Congratulations!</Text>
              <Text style={styles.toptext}>Worked great in Turkishya!</Text>
              <Text style={styles.topptext}>
                And mastered the skill 'Alphabets'
              </Text>
            </View>
            </Modal>
<View>
);
}

signup.js:

import React, {useState} from "react";
import {View, StyleSheet, Text, Keyboard, ToastAndroid, LogBox} from 'react-native';
import { TextInput, TouchableOpacity } from "react-native-gesture-handler";
import {Auth} from '../services';

export default signup =({navigation}) => {

    const [userName, setName]= useState()
    const [email,setEmail]= useState()
    const [pass, setpass]=useState()

    return (
        <View style={styles.body}>
            
            <Text style={styles.toptext}>
                Sign Up
            </Text>

            <View style={styles.inputview}>
            <TextInput
                style={styles.inputext}
                placeholderTextColor='#ffffff88'
                placeholder="Enter Your Name"
                keyboardType='default'
                value={userName}
                onChangeText ={e => setName(e)}
            />
            </View>


            <View style={styles.inputview}>
            <TextInput
                style={styles.inputext}
                placeholderTextColor='#ffffff88'
                placeholder="Enter Email"
                keyboardType="email-address"
                value={email}
                onChangeText ={e => setEmail(e)}
            />
            </View>

            <View style={styles.inputview}>
            <TextInput
                style={styles.inputext}
                placeholderTextColor='#ffffff88'
                placeholder="Enter Password"
                secureTextEntry
                value={pass}
                onChangeText ={e => setpass(e)}
            />
            </View>

        
            <TouchableOpacity 
                onPress={() => {Auth.signUp(userName, email,pass); LogBox.ignoreLogs(['Given String is empty or null']); ToastAndroid.showWithGravity('Loading...', ToastAndroid.CENTER, ToastAndroid.CENTER); Keyboard.dismiss();}}
                style={styles.button}
            >
                <Text style={styles.buttontext}>
                    Sign Up
                </Text>
            </TouchableOpacity>

            <View
                style={{
                    borderBottomColor: '#ffffff99',
                    borderBottomWidth: 1,
                    marginLeft:25,
                    marginRight:25,
                    marginTop:25,
                }}
            />
            <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
            <Text style={styles.lowertext}>
                Already have an account?
                </Text>
                <TouchableOpacity
                     onPress={() => navigation.navigate('login')}
                >
                    <Text style={styles.nestedtext}>Login Here</Text> 
                </TouchableOpacity>
           
            </View>
        
        </View>
    )
}

auth.js:

import { Alert } from 'react-native';
import auth from '@react-native-firebase/auth';
import firestore from '@react-native-firebase/firestore';

const createUserInDb=(uid, fullName, email)=>{
    return firestore().collection('user').doc(uid).set(
        {uid,
        fullName,
        email
        }
    )
}


const signUp = (fullName, email, password) => {
    if(!fullName || !email || !password){
        Alert.alert('Error', 'Please enter all fields!')

    }

    return auth().createUserWithEmailAndPassword(email,password)
    .then (cred => {
        const {uid} =cred.user;
        auth().currentUser.updateProfile({
        displayName: fullName
    })
    return uid
    })
    .then(
        uid => createUserInDb(uid, fullName, email)
    )
   .catch(
       err => Alert.alert (err.code,err.message)
   )
}

const signIn = (email, password) => {
    if  (!email || !password){
        Alert.alert('Error', 'Please enter all fields')
    }
    return auth().signInWithEmailAndPassword(email, password)
    .then(()=> {})
    .catch(
        err => Alert.alert(err.code,err.message)
    )
}

const forgetPassword =(email) => {
    if(!email){
        Alert.alert('Error', 'Please enter Email!')
    }

    return auth().sendPasswordResetEmail(email)
    .then(()=> {
        return Alert.alert('Link Sent on Given Email!', 'Check your Email. A password reset link has been sent.')
    })
    .catch(
        err => Alert.alert(err.code,err.message)
    )

}

const signOut = () => {
    return auth().signOut()
}


const Auth = {
    signUp,
    signIn,
    forgetPassword,
    signOut
}

export default Auth

Answer 1

像这样的事情通常应该在服务器上处理。但是，您可以使用 AsyncStorage.

使其在 phone 上持久化

存储功能

import AsyncStorage from '@react-native-async-storage/async-storage';

// or whatever
const key = "hasPassed"

export const hasPassed = async () => {
    return AsyncStorage.getItem(key).then(result => result != null ? JSON.parse(result) : undefined).catch(e => console.log(e))    
}

export const setHasPassed = async (newPassed) => {
    return AsyncStorage.setItem(key, JSON.stringify({hasPassed: newPassed})).catch(e => console.log(e))
}

然后，按如下方式在您的屏幕中使用它。

// or whatever name it is
const MainScreen = () => {

   const [showpass, setshowpass] = useState();
   
   useEffect(() => {
       const getState = async () => {
           const result = await hasPassed()
           setshowpass(result ? result.hasPassed : false)
       }
       getState()
   }, [])

   // since it is async
   if (showpass === undefined) {
      return null
   }

   return (
      <View style={styles.body}>
        <Modal
           transparent={false}
           visible={showpass}
           animationType='slide'
           hardwareAccelerated 
         >
            <View style={styles.body}>
              <Text style={styles.toptext}>Congratulations!</Text>
              <Text style={styles.toptext}>Worked great in Turkishya!</Text>
              <Text style={styles.topptext}>
                And mastered the skill 'Alphabets'
              </Text>
            </View>
            </Modal>
      <View>
   );
}

如果设置了状态，直接保存到本地存储即可，如下。

if(count<5) {
  //  Alert.alert('pass','pass');
  // showing passing screen in the form of a modal
   setHasPassed(true).then(() => setshowpass(true))
}

希望应用程序在用户通过测试后保存通过的屏幕，即使应用程序在本机反应中退出也是如此

want the app to save the passing screen after a user has passed the test even when the app exits in react native

javascript

state

react-native