javascript - 在页面之间发送值反应原生钩子

Question

我是 React Native 的新手，坚持将数据传递到另一个页面。在这种情况下，我想将数据从 QR 阅读器发送到另一个页面。

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

const LoginScreen = (props) => { 

const onSuccess = e => {
       const Data = e.data
       console.log(Data);
       props.navigation.replace("Input Water Transaction", {result: Data })
     };
   
       return (
         <QRCodeScanner
           onRead={onSuccess}
           flashMode={RNCamera.Constants.FlashMode.off}
           topContent={
            <Text>
                Scan QR Water
            </Text>
           }
           bottomContent={
             <TouchableOpacity style={styles.buttonTouchable}>
               <Text style={styles.buttonText}>Scan QR Water</Text>
             </TouchableOpacity>
           }
         />
       );
     }

这是第二个屏幕：

const InputWater = (props) => {

    const navigation = useNavigation();   
    
    const QRResult =  props.navigation.getParam('result', 'nothing sent')
    return (

    <ScrollView>
    <View style={{
        flex:1,
 
    }}>

<Root>
            <TouchableOpacity
                      onPress={() =>
              Popup.show({
                type: 'Success',
                title: 'Upload complete',
                button: true,
                textBody: 'Congrats! Your upload successfully done',
                buttontext: 'Ok',
                callback: () => navigation.navigate('Scan QR Water')
              })
            }
        >
            
                        <View style={{
                            backgroundColor: '#4cd137',
                            marginTop: 10,
                            borderRadius: 10,
                        }}>
                       
                            <Text style={{
                                marginTop: 10,
                                marginBottom: 10,
                                fontWeight: 'bold',
                                textAlign: 'center'
                            }}>{QRResult}</Text>
                        </View>
                    
                        </TouchableOpacity>
                        </Root>
      <View style={{
        flexDirection: 'column',
        justifyContent: 'flex-start',
        alignItems: 'center',
        alignContent: 'center',
        marginTop: 10,
        
      }}>

       
      
        <View style={{
            width: 350,
            minWidth: 310,
            maxWidth: 310, 
            backgroundColor: '#d6e0f0',
            marginTop: 10,
            borderRadius: 10,
            alignItems: 'stretch',
            }}>
            <View style={{
                backgroundColor: '#fff',
                marginTop: 5,
                marginLeft: 5,
                marginRight: 5,
                borderRadius: 10,
                marginBottom: 5
            }}>
                <View style={{
                    marginTop: 10,
                    marginBottom: 10,
                    marginLeft: 10,
                    flexDirection: 'column'
                }}>
                <Text>Electricity Meter No</Text>
                <TextInput style={{
                    backgroundColor: '#ecf0f1',
                    borderRadius: 10,
                    height: 35,
                    minWidth: 240,
                    maxWidth: 280,
                    marginTop: 5,
                }}>
                </TextInput>

                <Text style={{
                    marginTop: 10
                }}>Start Electricity Meter</Text>
                <TextInput style={{
                    backgroundColor: '#ecf0f1',
                    borderRadius: 10,
                    height: 35,
                    minWidth: 240,
                    maxWidth: 280,
                    marginTop: 5,
                }}>
                </TextInput>

                <Text style={{
                    marginTop: 10
                }}>Last Electricity Meter</Text>
                <TextInput style={{
                    backgroundColor: '#ecf0f1',
                    borderRadius: 10,
                    height: 35,
                    minWidth: 240,
                    maxWidth: 280,
                    marginTop: 5,
                }}>
                </TextInput>

                <Text style={{
                    marginTop: 10
                }}>Lost Electricity(%)</Text>
                <TextInput style={{
                    backgroundColor: '#ecf0f1',
                    borderRadius: 10,
                    height: 35,
                    minWidth: 240,
                    maxWidth: 280,
                    marginTop: 5,
                }}>
                </TextInput>
                

                </View>
            </View>

           
            </View>
                   
      </View>
                <View style={{
                    justifyContent: 'center',
                    flexDirection: 'column',
                    marginTop: 200
                    
                }}>
                    <Text style={{
                        fontSize: 20,
                        fontWeight: 'bold',
                        textAlign: 'center'
                    }}>Water Transaction</Text>
                </View>
      </View>
    </ScrollView>
    
    );
};

但我收到这样的错误：

ERROR    TypeError: props.navigation.getParam is not a function. (In 'props.navigation.getParam('result', 'nothing sent')', 'props.navigation.getParam' is undefined)

如何从第一个屏幕获取值？或者我做错了？我很感激任何建议，谢谢！

标签： javascriptandroidreact-nativeparameter-passing

Answer 1

如果您使用的是反应导航 5

props.route.params

如果年龄较大

props.navigation.state.params

它在使用 navigation.navigate('ScreenName', {params}) 导航时有效

我不确定navigation.replace