无法在本机反应的两个组件之间传递值

Question

因此，我正在关注YouTube上关于Academind的本机教程，但我似乎无法开始在两个组件之间传递值。在此行onPress={()=>props.onGame(selNumber)}上的startgamescreen中，我似乎跟随他并传递selNumber，但出现的错误是onGame不是函数，并且未定义并在App.js中

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


let content=<StartGameScreen onGame={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

您需要将onGame = {gameHandler}添加到此组件中：

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

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

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

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

请参见codeandbox中的精简版本：

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

Answer 2

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

例如，这是一个很好的链接：[https://callstack.com/blog/sending-events-to-javascript-from-your-native-module-in-react-native/][1]