我想要添加进度条从一个屏幕切换到另一个屏幕。

Question

我正在开发一个反应应用程序。它具有简单的特点。问题是，在用户登录后，他们被迫在登陆页面加载之前等待6-9秒。

因此，我想在用户单击“注册”按钮后添加一个进度条作为弹出，以通知用户页面正在加载。

 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>

谁来帮忙啊。较新的反应和JS。

Answer 1

如果您想要一个进度条，那么注册函数将需要一些修改。它将需要一个额外的参数onProgress。您还需要跟踪完成的百分比，并在达到里程碑时更新该百分比：

function registration(email, password, phone, firstName, onProgress){
  let progress = 0;
  const updateProgress = newVal=>{
    progress+=newVal;
    onProgress(progress)
  }
  // when a milestone is reached call updateProgress e.g

  // connected to auth service
  updateProgress(0.2);
  // verified user email doesnt exist
  updateProgress(0.1)
  // createdNewUser
  updateProgress(0.7)
  */
}

现在，您希望创建一个进度变量并选择进度条组件。

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>
  )

试试吧，这里