无法在 React Native 中的两个组件之间传递值

Question

所以我正在关注 youtube 上关于 React Native 的 Academind 教程，但我似乎无法开始在两个组件之间传递值。在这一行的 startgamescreen onPress={()=>props.onGame(selNumber)} 我似乎跟着他并传递了 selNumber 但我得到的错误是 onGame is not a function and undefined 在 App.js

const gameHandler=(selNum)=>{
    setUserNumber(selNum);
};


let content=<StartGameScreen onGame={gameHandler} />;

在这里我似乎完全跟随他并通过了 gamehandler 但我仍然不明白哪里出了问题。请帮助我，我已经尝试调试这段代码一段时间了。

StartGameScreen.js

import React, {useState} from 'react';
import { View, StyleSheet, Alert ,Text, Button, TouchableWithoutFeedback,Keyboard} from 'react-native';
import NumberComponents from '../components/NumberComponent';
import Card from '../components/Card';
import Colors from '../constants/colors';
import Input from '../components/Input';

const StartGameScreen = props => {
   const [enteredValue,setEnteredValue]=useState('');
   const [confirmed,setConfirmed]=useState(false);
   const [selNumber,setSelNumber]=useState('');
   const numberHandler =textinput=>{
      setEnteredValue(textinput.replace(/[^0-9]/g,''));
   };

   let confirmedOutput;
   if(confirmed){
      confirmedOutput=<Card style={styles.confirm}>
         <Text>You Selected:</Text>   
         <NumberComponents children={selNumber}/>  
         <Button title='Start Game' onPress={()=>props.onGame(selNumber)}/>                    
      </Card>
   }

   const resetInputHandler=()=>{
      setEnteredValue('');
      setConfirmed(false);
   };
   const confirmButtonHandler=()=>{
      const chosenNum=parseInt(enteredValue);
      if(isNaN(chosenNum)  || chosenNum<=0 || chosenNum>99){
         Alert.alert(
            'InValid Number',
            'Please Enter Valid Number Between 1 and 99',
            [{text:'Okay',style:'destructive',onPress:resetInputHandler}]
         )
         return;
      }
      setConfirmed(true);
      setEnteredValue('');
      setSelNumber(chosenNum);
      Keyboard.dismiss();
   };
   return (
      <TouchableWithoutFeedback onPress={()=>{Keyboard.dismiss();}}>
      <View style={styles.screen}>
         <Text style={styles.title}> Start A New Game </Text>
         <Card style={styles.inputContainer}>
            <Text style={{ color: 'green', fontSize: 15 }}>Choose A Number</Text>
            <Input 
               keyboardType='number-pad' 
               maxLength={2} 
               style={styles.input} 
               blurOnSubmit
               onChangeText={numberHandler}
               value={enteredValue} 
            />
            <View style={styles.buttonContainer}>
               <View style={styles.button}>
                  <Button 
                     title='Reset'
                     color={Colors.accent}
                     onPress={resetInputHandler} />
               </View>
               <View style={styles.button}>
                  <Button 
                     title='Confirm'
                     onPress={confirmButtonHandler}
                     color='orange' />
               </View>
            </View>
         </Card>
         {confirmedOutput}
      </View>
   </TouchableWithoutFeedback>
);
};

在App.js

import React,{ useState }  from 'react';
import { StyleSheet, View } from 'react-native';
import Header from './components/Header';
import StartGameScreen from './screens/StartGameScreen';
import GameScreen from './screens/StartGameScreen';




export default function App() {
  const [userNumber,setUserNumber]=useState();

const gameHandler=(selNum)=>{
    setUserNumber(selNum);
  };


  let content=<StartGameScreen onGame={gameHandler} />;

  if(userNumber){
    content=<GameScreen userChoice={userNumber}/>;
  }
  return (
    <View style={styles.screen}>
      <Header title="Guess A Number"/>     
       {content}      
    </View>
  );
}

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

Answer 1

你好，如果你的组件之间没有父子关系，你可以使用DeviceEventEmitter之类的Event。

这里有一个很好的link例子：[https://callstack.com/blog/sending-events-to-javascript-from-your-native-module-in-react-native/][1]

Answer 2

您需要在该组件中添加 onGame={gameHandler}：

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

由于 GameScreen 和 StartGameScreen 是相同的组件，

import StartGameScreen from './screens/StartGameScreen';
import GameScreen from './screens/StartGameScreen';

在第二种情况下，当 userNumber 不为 false 时，GameScreen 组件在没有 onGame 道具的情况下被调用。

在 codesandbox 中查看工作精简版本：

https://codesandbox.io/s/affectionate-wright-3bccd

无法在 React Native 中的两个组件之间传递值

Can't pass value between two components in react native

javascript

reactjs

react-native

react-native-android

react-props