Блог

Я пытаюсь запустить это приложение в react, но оно продолжает выдавать мне ту ошибку, что не может найти переменное направление. Как мне это решить? Код приведен ниже.

APP.js

     // Importing Libs

    import React, {useState} from 'react';
    import { StyleSheet, View , SafeAreaView} from 'react-native';
    import Header from './APP/Components/Header';
    import StartGameScreen from './APP/Screens/StartGameScreen';
    import GameScreen from './APP/Screens/GameScreen';

    export default function App() {

    const [userNumber, setUserNumber] = useState();

    const startGameHandler = (selectedNumber) => {
      setUserNumber(selectedNumber);
    };

    let content = <StartGameScreen onStartGame={startGameHandler} />;

    if (userNumber) {
      content = <GameScreen userChoice={userNumber} />;
    }

      return (
        
        <View style={styles.screen}>
          <Header title="GUESS THE NUMBER" />
          {content}
        </View>
        
      );
    }

    const styles = StyleSheet.create({
     screen: {
      flex: 1
     },
    });
 

GameScreen.js

     import React, {useState, useRef} from 'react';
import {View , Text , StyleSheet, Button, Alert} from 'react-native';


const generateRandomBetween = (min, max , exclude) => {
    min = Math.ceil(min);
    max = Math.floor(max);
    const rndNum = Math.floor(Math.random() * (max - min))   min;
    if (rndNum === exclude) {
        return generateRandomBetween(min, max, exclude);
    } else {
        return rndNum;
    }
};

const GameScreen = props => {
  const [currentGuess, setCurrentGuess] = useState(generateRandomBetween(1, 99, props.userChoice));

  const currentLow = useRef(1);
  const currentHigh = useRef(99);

  const nextGuessHandler = direction => {
    if ((direction === 'lower' amp;amp; currentGuess < props.userChoice) || (direction === 'greater' amp;amp; currentGuess > props.userChoice) ) {
      Alert.alert('Don't lie to me', 'You Can't Trick Me' [{text: 'I won't lie again , SORRY!', style: 'cancel'}]);
    }
    
  }

  if ( direction === 'lower') {
       currentHigh.current = currentGuess;
  } else {
       currentLow.current = currentGuess;
  }
 const nextNumber = generateRandomBetween(currentLow.current, currentHigh.current, currentGuess);
 currentGuess(nextNumber);



  return (
    <View style={styles.screen}>
    <Text>Opponent Guess</Text>
    <View style={styles.guessNumberContainer}>
      <Text style={styles.guessText}>{currentGuess}</Text>
    </View>
    <View style={styles.buttonContainer}>
       <Button title="LOWER" onPress={nextGuessHandler.bind(this, 'lower')} />
       <Button title="HIGHER" onPress={nextGuessHandler.bind(this, 'greater')} />
    </View>
    </View>
  )
};

const styles = StyleSheet.create({
  gameScreenContainer: {
    width: 300,
    maxWidth: '80%',
    alignItems: 'center',
    shadowColor: 'black',
    shadowOffset: { width: 0, height: 2},
    shadowRadius: 4,
    shadowOpacity: 0.26,
    backgroundColor:'#fff',
    elevation: 8 ,
    padding: 20,
    borderRadius: 15,
    marginTop: 30
  },

  guessNumberContainer:{
    borderWidth: 2,
    borderColor: "#FFC45D",
    padding: 10,
    borderRadius: 10,
    marginVertical: 10,
    alignItems: 'center',
    justifyContent:'center',
    width: 200
  },

  guessText:{
    color: "#FFC45D",
    fontSize: 22
  },

  screen:{
      flex: 1,
      padding: 10,
      alignItems: 'center'
  },

  buttonContainer:{
    width: 300,
    maxWidth: '80%',
    justifyContent: 'space-between',
    alignItems: 'center',
    shadowColor: 'black',
    shadowOffset: { width: 0, height: 2},
    shadowRadius: 4,
    shadowOpacity: 0.26,
    backgroundColor:'#fff',
    elevation: 8 ,
    padding: 20,
    borderRadius: 15,
    flexDirection: 'row',
    marginTop: 20
  }
});

export default GameScreen;
 

Я понятия не имею , как это исправить, даже не знаю, с чего начать. Я попытался изменить название направления на что-то другое , но все равно выдает ошибку, и я убедился, что React был импортирован, я понятия не имею, чего мне не хватает.

Основываясь на разговоре в комментариях, я предполагаю, что вы хотите чего-то подобного…

 const nextGuessHandler = direction => {
    if ((direction === 'lower' amp;amp; currentGuess < props.userChoice) || (direction === 'greater' amp;amp; currentGuess > props.userChoice) ) {
        Alert.alert('Don't lie to me', 'You Can't Trick Me' [{text: 'I won't lie again , SORRY!', style: 'cancel'}]);
    }

    if ( direction === 'lower') {
        currentHigh.current = currentGuess;
    } else {
        currentLow.current = currentGuess;
    }
}

const nextNumber...