React Native Navigation：在屏幕之间传递数据

Question

我想在一个屏幕与另一个屏幕之间传递数据（我从选择器的值中获取），但不幸的是我收到一个错误：'undefined is not an object (evaluating props.navigation.getParam)'：Error

这是我第一个屏幕上的代码：

const PickerInputExample = props => {


        const [taille, setTaille] = useState([]); 
       
        const [type, setType] = useState([]); 

      
    
  const pressHandler = () => {
      props.navigation.navigate('AvionScreen')
  };

  const [A, setA] = useState();
  const [B, setB] = useState();

  const [confirmed, setConfirmed] = useState(false);
  let confirmedOutput;
  if (confirmed) {
        confirmedOutput = (
            <View style={styles.container}>

            <PricingCard
                color="#4f9deb"
                title="Estimation"
                price="45€"
                info={['Empreinte carbone minimale']}
                button={{ title: "J'en profite", icon: 'flight-takeoff'}}
                onButtonPress={pressHandler}
                containerStyle={styles.container}
            />
        </View>)
  }

  return (


      <View>
          <Formik
              initialValues={{
                  type: '',
                  taille: '',
              }}
              onSubmit={(values, actions) => {
                setConfirmed(true)}}
          >
              {(props) => (
                  <View>
                      <View style={{marginTop: 20}}>
                      <Picker
                              mode="dropdown"
                              iosIcon={<Icon name="arrow-down" />}
                              placeholder="Choisissez votre avion"                                  
                              selectedValue={props.values.type}
                              onValueChange={itemValue => props.setFieldValue('type', itemValue)}
                              onPickerValueChange={(itemValue1, index) => {
                          setA(value);
                          props.navigation.navigate({ params:
                                  {type: itemValue1}
                               });
                          console.log(A);

                      }}>
                          <Picker.Item label="Choisissez le type de votre avion (*)" value="0" />
                          <Picker.Item label="A380" value="1" />
                          <Picker.Item label="A360" value="2" />
                      </Picker>
                      </View>
                      <View style={{marginTop: 20}}>
                          <Picker
                              mode="dropdown"
                              iosIcon={<Icon name="arrow-down" />}
                              placeholder="Choisissez la taille votre avion"                               
                              selectedValue={props.values.taille}
                              onValueChange={itemValue => props.setFieldValue('taille', itemValue)}
                              onPickerValueChange={(value1, index) => {
                                  setB(value);
                                  props.navigation.navigate({params: {
                                          taille: value1
                                      }
                                      });
                              }}>
                              <Picker.Item label="Choisissez la taille de votre avion" value="0" />
                              <Picker.Item label="Grand" value="1" />
                              <Picker.Item label="Petit" value="1" />
                          </Picker>
                      </View>
                      <FlatButton text="Voir mon estimation" onPress={props.handleSubmit} style={styles.bouton5}/>
                  </View>
              )}
          </Formik>
          {confirmedOutput}
      </View>
  );

};

export default PickerInputExample;

这是我第二个屏幕上的代码（我删除了与问题无关的 formik 表单的一些部分）：

const AvionScreen = props => {


    const taille = props.navigation.getParam('type');
    const type = props.navigation.getParam('taille');

  
    return (
        <View style={styles.container}>
        <ScrollView>
        <Formik
            initialValues={initialValues}
            onSubmit={(values) => {
                console.log(values)
            }}
        >
            {(props) => (
                <View>
                    <Text>Type d'engin : {type}</Text>
                    <Text>Taille de l'engin : {taille}</Text>
                </View>    
        </Formik>
        </ScrollView>
        </View>
    )

}

export default ReviewForm;

非常感谢您的回答

Answer 1

您实际上并没有将参数传递给您正在调用的路由。

props.navigation.navigate('AvionScreen')

需要...

props.navigation.navigate('AvionScreen', { /* params go here */ })

查看 documentation

React Native Navigation：在屏幕之间传递数据

React Native Navigation : passing data between screen

react-native

react-native-navigation