Блог

Я немного новичок в React Native и пытаюсь создать простую игру с 3 категориями. Я использую Expo, и в моем проекте есть два основных файла для вызова файлов вопросов категории и для ввода самого теста, IndexQuiz.js и Quiz.js . Экран перед IndexQuiz в навигации — это просто меню, к которому я попадаю в эти категории.

IndexQuiz.js:

 import React from "react";
import { ScrollView, StatusBar, TouchableOpacity, Text, Image, View, SafeAreaView} from "react-native";
import { AppStyles, DesafiosStyles } from "../AppStyles";
import questoes_arquitetura from "../questions/questoes_arquitetura";
import questoes_curiosidades from "../questions/questoes_curiosidades";
import questoes_historia from "../questions/questoes_historia";

export default ({ navigation }) => (
  <ScrollView style={{backgroundColor:"rgb(32, 53, 70)"}}>
    <StatusBar barStyle="light-content" />
    <SafeAreaView style={{alignItems: "center", flexDirection: "column"}}>

  <Text style={AppStyles.titleText}>Categorias</Text>
  <TouchableOpacity onPress={() => 
    navigation.navigate("Quiz", {
      title: "Arquitetura",
      questions: questoes_arquitetura,
      color: "#36b1f0"
    })} 
    style={DesafiosStyles.cardContainer}>
    <Image style={DesafiosStyles.cardImage} source={require("../assets/tp_madre.jpg")}/>
    <View style={DesafiosStyles.cardContent}>
      <Text style={DesafiosStyles.cardTitle}>Arquitetura</Text>
    </View>
  </TouchableOpacity>

  <TouchableOpacity onPress={() => 
    navigation.navigate("Quiz", {
      title: "Curiosidades",
      questions: questoes_curiosidades,
      color: "#36b1f0"
    })} 
    style={DesafiosStyles.cardContainer}>
    <Image style={DesafiosStyles.cardImage} source={require("../assets/tp_madre.jpg")}/>
    <View style={DesafiosStyles.cardContent}>
      <Text style={DesafiosStyles.cardTitle}>Curiosidades</Text>
    </View>
  </TouchableOpacity>

  <TouchableOpacity onPress={() => 
    navigation.navigate("Quiz", {
      title: "História",
      questions: questoes_historia,
      color: "#36b1f0"
    })} 
    style={DesafiosStyles.cardContainer}>
    <Image style={DesafiosStyles.cardImage} source={require("../assets/tp_madre.jpg")}/>
    <View style={DesafiosStyles.cardContent}>
      <Text style={DesafiosStyles.cardTitle}>História</Text>
    </View>
  </TouchableOpacity>

</SafeAreaView>
  

);

Quiz.js:

 import React from "react";
import { View, StyleSheet, StatusBar, Text, SafeAreaView } from "react-native";
import { Button, ButtonContainer } from "../components/Button";
import { Alert } from "../components/Alert";

const styles = StyleSheet.create({ ...

export default class Quiz extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      correctCount: 0,
      totalCount: this.props.route.params("questions", []).length,
      activeQuestionIndex: 0,
      answered: false,
      answerCorrect: false
    }
}

  answer = correct => {
    this.setState(
      state => {
        const nextState = { answered: true };

        if (correct) {
          nextState.correctCount = state.correctCount   1;
          nextState.answerCorrect = true;
        } else {
          nextState.answerCorrect = false;
        }

        return nextState;
      },
      () => {
        setTimeout(() => this.nextQuestion(), 750);
      }
    );
  };

  nextQuestion = () => {
    this.setState(state => {
      const nextIndex = state.activeQuestionIndex   1;

      if (nextIndex >= state.totalCount) {
        return this.props.navigation.popToTop();
      }

      return {
        activeQuestionIndex: nextIndex,
        answered: false
      };
    });
  };

  render() {
    const questions = this.props.route.params("questions", []);
    const question = questions[this.state.activeQuestionIndex];

    return (
      <View
        style={[
          styles.container,
          { backgroundColor: this.props.route.params("color") }
        ]}
      >
        <StatusBar barStyle="light-content" />
        <SafeAreaView style={styles.safearea}>
          <View>
            <Text style={styles.text}>{question.question}</Text>

            <ButtonContainer>
              {question.answers.map(answer => (
                <Button
                  key={answer.id}
                  text={answer.text}
                  onPress={() => this.answer(answer.correct)}
                />
              ))}
            </ButtonContainer>
          </View>

          <Text style={styles.text}>
            {`${this.state.correctCount}/${this.state.totalCount}`}
          </Text>
        </SafeAreaView>
        <Alert
          correct={this.state.answerCorrect}
          visible={this.state.answered}
        />
      </View>
    );
  }
}
  

Затем, когда я пытаюсь продолжить и выбрать категорию: TypeError: _this.props.route.params is not a function. (In '_this.props.route.params("questions", [])', '_this.props.route.params' is an instance of Object)

Я что-то здесь упускаю, но что?

Попробуйте получить доступ таким образом

 constructor(props) {
    super(props)
    this.state = {
      ...
      totalCount: props.route.params.questions.length,
      .....
}