React Native Stack Navigation：导航上的重新渲染屏幕

Question

我刚刚开始学习本机响应，并且正在尝试创建一个猜谜游戏，用户可以在其中猜测计算机的号码。我遇到一个问题，当游戏结束并单击新游戏时，它会调用导航功能转到游戏屏幕，该组件不会重新渲染，并且我过去的数据仍然存在。

    const GameScreen = props => {
        const number = props.route.params.number;
        console.log(number);
        const [userGuess, setUserGuess] = useState([]);
        const [currentGuess, setCurrentGuess] = useState('');
        const [rounds, setRounds] = useState(0);

        const guessInputHandler = (enteredNum) => {
            setCurrentGuess(enteredNum);
        }
        const doneHandler = (guess) => {
            Keyboard.dismiss();
            checkInput(guess);
            setTimeout(() => setCurrentGuess(''), 1000);
        }
        const checkDigits_Pos = (guess) => {
            var looked = [];
            var pos = 0;
            var count = 0;
            for (var i = 0; i < guess.length; i++) {
                var char = guess.charAt(i);
                if (number.includes(char) && !looked.includes(char)) {
                    count++;
                    looked.push(guess.charAt(i));
                }
                if (number.charAt(i) === guess.charAt(i)) pos++;
            }
            return [count, pos]
        }
        const checkInput = (guess) => {
            setRounds(curRounds => curRounds + 1);
            if (guess != number) {
                const data = checkDigits_Pos(guess);
                const numDigits = data[0];
                const numPos = data[1];
                setUserGuess((userGuess) => [...userGuess, { key: Math.random().toString(), number: guess, digits: numDigits, position: numPos }])

            } else {

                props.navigation.navigate('GameOver', { rounds: rounds });
            }

        }
        return (
            <View style={styles.screen}>
                <TableRow
                    number="Number"
                    digits="Digits Correct"
                    position="Positions Correct"
                    color='#807878'
                    fontColor='white' />
                <View style={styles.line}></View>
                <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : null}
                    style={{ flex: 1 }} >
                    <View style={styles.list}>
                        <FlatList
                            data={userGuess}
                            renderItem={({ item, index }) => (
                                <View>
                                    <TableRow
                                        id={item.key}
                                        number={item.number}
                                        digits={item.digits}
                                        position={item.position}
                                        color={(index == userGuess.length - 1) ? '#C4C4C4' : null}
                                    />
                                    <View style={styles.line}></View>
                                </View>)
                            }
                        />

                        <View style={styles.section}>
                            <SmoothPinCodeInput
                                value={currentGuess}
                                onTextChange={guessInputHandler}
                                codeLength={6}
                                onFulfill={doneHandler}
                            // cellStyle = {{borderColor: 'white', borderWidth: 2}}
                            // textStyle = {{color: 'white', fontSize: 24}}
                            />
                        </View>
                    </View>
                </KeyboardAvoidingView>
            </View>
        )
    }

在gameOver屏幕上，我具有新的游戏按钮：

    onPress= {() => props.navigation.navigate('Game', {number: generateRandomNumber(), newGame: true})}

App.js（包含导航堆栈）

export default class App extends React.Component {
  render() {
    const Stack = createStackNavigator();
      return (
        <NavigationContainer>
          <Stack.Navigator initialRouteName="Home">
            <Stack.Screen 
              name="Home" 
              component={HomeScreen}
              options={{ headerShown: false }}
              />
            <Stack.Screen 
              name="Instructions" 
              component={InstructionScreen}
              options={{
                title: '',
                headerStyle: {
                backgroundColor: '#9B8AB9',
                borderBottomWidth: 0,
                elevation: 0
                }
              }} />
            <Stack.Screen 
              name="Game" 
              component={GameScreen}
              options={{
                title: '',
                headerTitle: props => <LogoTitle {...props} /> ,
                headerStyle: {
                  backgroundColor: '#DFDADA',
                  borderBottomWidth: 1,
                  elevation: 0,
                  shadowOffset: 0
                }
              }} />
            <Stack.Screen 
              name="GameOver" 
              component={GameOverScreen}
              options={{
                headerShown: false
                }
              } />
          </Stack.Navigator>
        </NavigationContainer>
      );
  }
}

抱歉，代码混乱，我仍在努力！另外，有人知道拥有某种高分功能的最佳方法