React Native：我无法从“子”屏幕设置 TextInput 值

Question

我在 React Native 中工作，我想在不可编辑的 TextInput 中设置一个值。该值写在我正在导航到的屏幕上。意义; “父”屏幕有空输入-> 我导航到“子”屏幕，我可以在其中在另一个 TextInput 中输入值。完成后，我想按“确定”并返回显示值的“父”屏幕。

我已尽我所能彻底阅读了文档，但我仍然无法使用它。我可以在“子”屏幕中设置值，但是当我导航回父屏幕时该值不会更新。

父屏幕

忽略与设备相关的代码，因为它会同化条形码逻辑

    import React, { useState } from 'react'
    import { Text, TouchableOpacity, View, Image, TextInput } from 'react-native'
    import styles from './styles';
    import { IMAGE } from '../../constants/Images'
    import { CustomHeader } from '../../CustomHeader'
    
    
    export default function SamplingScreen({ navigation, route }) {
    
        //const [barcodeData, setBarcodeData] = useState('32231321')
        const [equipmentID, setEquipmentID] = useState('')
    
        //Guarding against undefined value
        const barcode = route.params?.barcode ?? 'Barcode'
    
        return (
            <View style={styles.container}>
                <CustomHeader title="Sample Oil" navigation={navigation} isHome={true} ></CustomHeader>
                <View style={styles.contentContainer}>
                    <Image
                        style={styles.logo}
                        source={IMAGE.ICON_LOGO}
                    />
                    <Text>Send an oil sample for analysis</Text>
                    <Text>Start by linking a bottle with its barcode</Text>
                    <TouchableOpacity style={styles.button} onPress={() => navigation.navigate('BottleID')} /*barcodeData={setBarcodeData}*/ >
                        <Text style={styles.buttonText} >Link Bottle</Text>
                    </TouchableOpacity>
                    <Text>Please link the equipment from which the sample was taken</Text>
                    <TouchableOpacity style={styles.button} onPress={() => navigation.navigate('EquipmentID')} equipmentID={setEquipmentID} >
                        <Text style={styles.buttonText} >Link Equipment</Text>
                    </TouchableOpacity>
                    <Text>This is the bottle barcode</Text>
                    <TextInput
                        editable={false}
                        style={styles.input}
                        defaultValue={barcode}
                        value={barcode}
                        underlineColorAndroid="transparent"
                        autoCapitalize="none">
                    </TextInput>
                    <Text>This is the equipment barcode</Text>
                    <TextInput
                        editable={false}
                        style={styles.input}
                        defaultValue={equipmentID}
                        value={equipmentID}
                        underlineColorAndroid="transparent"
                        autoCapitalize="none">
                    </TextInput>
    
                    <TouchableOpacity style={styles.button}>
                        <Text style={styles.buttonText}>Accept</Text>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }

子屏幕

    import React, { useState } from 'react';
    import { View, Text, TouchableOpacity, TextInput } from 'react-native';
    import { CustomHeader } from '../../../CustomHeader'
    import styles from './styles'
    
    export default function SetBottleIDScreen({ navigation, route }) {
    
        const [barcodeData, setBarcodeData] = useState('')
        console.log(barcodeData)
    
        return (
            <View style={styles.container} >
                <CustomHeader title="Bottle ID" isHome={false} navigation={navigation} ></CustomHeader>
                <Text style={{ marginTop: 30, marginBottom: 30 }} > Set barcode for sampling bottle </Text>
                <TouchableOpacity style={styles.button} onPress={() => navigation.navigate('Camera')}>
                    <Text style={styles.buttonText}>Scan Barcode</Text>
                </TouchableOpacity>
                <Text style={{ marginTop: 60, marginBottom: 10 }} >Insert Barcode</Text>
                <TextInput
                    style={styles.input}
                    placeholder='Barcode'
                    placeholderTextColor="#aaaaaa"
                    onChangeText={(text) => setBarcodeData(text)}
                    value={barcodeData}
                    underlineColorAndroid="transparent"
                    autoCapitalize="none">
                </TextInput>
                <TouchableOpacity style={styles.button} onPress={() => navigation.navigate('Sampling', { screen: 'Sampling', params: { barcode: barcodeData }, merge: true })}>
                    <Text style={styles.buttonText} >OK</Text>
                </TouchableOpacity>
            </View>
        );
    }

我正在使用 React Navigation 5.x。我很确定该值必须被解析为带有route 的参数，但有些东西没有按预期工作。

Answer 1

我解决了这个问题。

设置参数的语法错误。 它应该看起来像这样：

<TouchableOpacity style={styles.button} onPress={() => navigation.navigate('Sampling', { barcode: barcodeData })}>
        <Text style={styles.buttonText} >OK</Text>
</TouchableOpacity>