开关盒始终为默认

时间:2020-10-07 13:20:24

标签: reactjs react-native

我将变量设置为0只是为了测试开关,它仍然始终运行默认块。我认为这与我将用户发送到此屏幕后立即运行它有关,但我不确定为什么,我还试图通过React Navigation从我的GenerateWorkoutScreen.js传递值到GeneratedWorkoutScreen.js但是我真的不太明白。

GeneratedWorkoutScreen.js

import React, { useState, useContext } from "react";
import { View, Text, StyleSheet, TouchableOpacity, Alert } from "react-native";
import data from "./../moves.json";
import GlobalSkillState from "./../contexts/GlobalSkillLevel";
import * as firebase from "firebase";
import Generate from "./../big_functions/generate";
import { render } from "react-dom";
import SkillLevel from "../big_functions/SkillLevel";
import { BaseRouter } from "@react-navigation/native";
import { getAppLoadingLifecycleEmitter } from "expo/build/launch/AppLoading";

export default class GeneratedWorkoutScreen extends React.Component {
  Generated = () => {
    const [workout, setWorkout] = useState("");
    const [state, setState] = useContext(GlobalSkillState);
    const test = 0;
    const shuffle = (arr) => {
      var i, j, temp;
      for (i = arr.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
      }
      return arr;
    };

    const checkSwitch = () => {
      switch (test) {
        case "0":
          //  warm up
          const warmup =
            "\nWarm up \n\n" +
            data.moves.warmup[0] +
            "                   " +
            data.timeIntervals[5] +
            "\n" +
            data.moves.warmup[1] +
            "           " +
            data.timeIntervals[10];

          //  training 1
          const qwer1 = [0, 1, 2, 3];
          const qwer2 = shuffle(qwer1);

          const temp1 = [1, 1, 1, 1];
          const begRanNumber = temp1.map(
            (x) =>
              10 * Math.floor(Math.random() * 1 + 1) +
              5 * Math.floor(Math.random() * 4 + 0)
          );

          const temp3 = [0, 1, 2, 3];
          const simpBegWorkout = temp3.map(
            (x) => begRanNumber[x] + " " + data.moves.basic[qwer2[x]] + "\n"
          );

          //  training 2
          const comboBegWorkout = data.moves.beginnerCombos.map(
            (x) =>
              "\n" +
              data.moves.beginnerCombos[
                Math.floor(Math.random() * data.moves.beginnerCombos.length + 0)
              ] +
              "         5 Minutes"
          );
          const training = "";
          //  render
          const workout =
            "\n\nWorkout \n\n" +
            simpBegWorkout[0] +
            simpBegWorkout[1] +
            simpBegWorkout[2] +
            simpBegWorkout[3] +
            comboBegWorkout[0];
          setWorkout(warmup + workout);
          break;

        case "1":
          Alert.alert("intermediate");
          setWorkout("");
          break;

        case "2":
          Alert.alert("advanced");
          setWorkout("");
          break;

        default:
          Alert.alert("Please select your skill level" + test);
      }
    };
    checkSwitch();

    return (
      <View style={styles.container}>
        <Text style={styles.genList}>{workout}</Text>
      </View>
    );
  };

  render() {
    return <this.Generated />;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  genList: {
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "flex-start",
  },
});

GenerateWorkoutScreen.js

import React, { useState, useContext } from "react";
import {
  View,
  FlatList,
  Text,
  StyleSheet,
  TouchableOpacity,
  AsyncStorage,
  Button,
  StatusBar,
  SafeAreaView,
  Alert,
} from "react-native";
import * as firebase from "firebase";
import Generate from "./../big_functions/generate";
import data from "./../moves.json";
import { render } from "react-dom";
import SkillLevel from "../big_functions/SkillLevel";
import GlobalSkillState from "./../contexts/GlobalSkillLevel";

export default class GenerateWorkoutScreen extends React.Component {
  state = {
    created_at: "",
    first_name: "",
    gmail: "",
    last_logged_in: "",
    last_name: "",
    locale: "",
    profile_picture: "",
  };

  componentDidMount() {
    firebase
      .database()
      .ref("users/" + firebase.auth().currentUser.uid)
      .on("value", (snapshot) => {
        const {
          created_at,
          first_name,
          gmail,
          last_logged_in,
          last_name,
          locale,
          profile_picture,
        } = snapshot.val();
        this.setState({
          created_at,
          first_name,
          gmail,
          last_logged_in,
          last_name,
          locale,
          profile_picture,
        });
      });
  }

  render() {
    const Tests1 = () => {
      const [state, setState] = useState({});
      return (
        <View style={styles.container}>
          <GlobalSkillState.Provider value={[state, setState]}>
            <SkillLevel></SkillLevel>
            <TouchableOpacity
              style={styles.genButton}
              onPress={() => {
                switch (state) {
                  case "0":
                    const dancegame = state;
                    this.props.navigation.navigate("Generate", {
                      screen: "PostGenerate",
                      testss2: dancegame,
                    });
                    break;

                  case "1":
                    Alert.alert("intermediate");
                    setWorkout("");
                    break;

                  case "2":
                    Alert.alert("advanced");
                    setWorkout("");
                    break;

                  default:
                    Alert.alert("Please select your skill level");
                }
              }}
            >
              <Text
                style={{
                  color: "#fff6f5",
                  fontSize: 20,
                  fontWeight: "100",
                  fontFamily: "sans-serif",
                }}
              >
                Generate
              </Text>
            </TouchableOpacity>
            {/* <Generate navigation={this.props.navigation}></Generate> */}
          </GlobalSkillState.Provider>
        </View>
      );
    };

    return <Tests1></Tests1>;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  genButton: {
    borderRadius: 20,
    color: "#FFFFFF",
    paddingVertical: 20,
    paddingHorizontal: 35,
    backgroundColor: "#FF644D",
  },
});

0 个答案:

没有答案