如何使用本機反應在另一個屏幕上發送和顯示文本輸入的值？

Question

我想將存儲在變量中的文本輸入數據發送到另一個屏幕，並顯示保存在所述變量中的數據

嘗試通過react-navigation傳遞變量的狀態，但是問題是我有3個屏幕，我想將存儲在變量文本中的數據從屏幕1傳遞到屏幕3

class Screen1 extends Component {

constructor(props) {
    super(props);
    this.state = {
        text: '',
        percentage: ''
    };
}

static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state
    var data = {
        textData: params.text
    }
    return {
        headerLeft: (
            <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                <AntDesign
                    name="left"
                    color="rgba(0,0,0,0.5)"
                    size={30}
                    style={{ marginLeft: 5 }}
                />
                <Text style={{ marginLeft: 20, color: '#000', fontSize: 17, fontWeight: 'bold' }}>Crear regalo</Text>
            </View>
        ),
        headerRight: (

            <View>
                <TouchableOpacity
                    disabled={navigation.getParam('isDisable')} // get value from params and pass it to disabled props
                    onPress={() => navigation.navigate('2', { data })}
                    style={styles.Btn}>
                    <Text style={styles.TxtBtn}>Siguiente</Text>
                </TouchableOpacity>
            </View>
        ),
    }
};
// set by a default value in componentDidMount to make the next button disable initially
componentDidMount() {
    Alert.alert('Advertencia', 'Ingrese el porcentaje de su descuento');
    this.props.navigation.setParams({ isDisable: true });
}

render() {

    return (
        <View style={styles.container}>
            <View style={styles.Box}>
                <ImageBackground source={require('../Icons/Regalo.png')} style={styles.Image}>
                    <View style={styles.ContainerInput}>
                        <TextInput
                            style={{ textAlign: 'center', color: '#fff', fontSize: 40, }}
                            type="numeric"
                            placeholder="%"
                            value={this.state.text} //set value from state
                            onChangeText={(text) => {
                                //when text length is greater than 0 than next button active otherwise it will be disable
                                let isDisable = text.length > 0 ? false : true
                                //set value in the state
                                this.setState({ text: text })
                                // set value to params
                                this.props.navigation.setParams({ isDisable: isDisable });
                            }} />
                        <Text style={{ fontSize: 40, color: '#fff', textAlign: 'center' }}>
                            {this.state.text.split(' ').map((word) => word && '%').join(' ')}
                        </Text>
                    </View>
                </ImageBackground>
            </View>
        </View>
    );
}

導出默認的Screen1； 我的屏幕二：

class Screen2 extends Component {
constructor(props) {
    super(props);
    this.state = {
        textData: this.props.navigation.state.params.data.textData,
        text: ''
    };
}

static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state
    var data = {
        textData: params.textData
    }
    return {
        headerLeft: (
            <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                <AntDesign
                    name="left"
                    color="rgba(0,0,0,0.5)"
                    size={30}
                    style={{ marginLeft: 5 }}
                    onPress={() => navigation.navigate('1')}
                />
                <Text style={{ marginLeft: 20, color: '#000', fontSize: 17, fontWeight: 'bold' }}>Crear regalo</Text>
            </View>
        ),
        headerRight: (
            <View>
                <TouchableOpacity
                    disabled={navigation.getParam('isDisable')} // get value from params and pass it to disabled props
                    onPress={() => navigation.navigate('3', { data })}
                    style={styles.Btn}>
                    <Text style={styles.TxtBtn}>Crear</Text>
                </TouchableOpacity>
            </View>
        ),
    }
};

componentDidMount() {
    this.props.navigation.setParams({ isDisable: true });

}
render() {

    return (
        <View style={styles.container}>
            <View style={styles.InputContainer}>
                <TextInput
                    multiline
                    style={styles.Input}
                    type="numeric"
                    placeholder="Describa los términos y condificones de tu regalos"
                    placeholderTextColor="rgb(196,196,196)"
                    value={this.state.text} //set value from state
                    onChangeText={(text) => {
                        //when text length is greater than 0 than next button active otherwise it will be disable
                        let isDisable = text.length > 1 ? false : true
                        //set value in the state
                        this.setState({ text: text })
                        // set value to params
                        this.props.navigation.setParams({ isDisable: isDisable });
                    }} />
            </View>
        </View>
    );
}

導出默認的Screen2； 我的屏幕三：

class Screen3 extends Component {

constructor(props) {
    super(props);
    this.state = {
        textData: this.props.navigation.state.params.data.textData,
        text: '',
        percentage: '',
    };
}

static navigationOptions = ({ navigation }) => ({
    headerLeft: (
        <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
            <AntDesign
                name="left"
                color="rgba(0,0,0,0.5)"
                size={30}
                style={{ marginLeft: 5 }}
                onPress={() => navigation.navigate('2')}
            />
            <Text style={{ marginLeft: 20, color: '#000', fontSize: 17, fontWeight: 'bold' }}>Crear regalo</Text>
        </View>
    ),
    headerRight: (
        <View>
            <TouchableOpacity
                disabled={navigation.getParam('isDisable')} // get value from params and pass it to disabled props
                onPress={() => navigation.navigate('4')}
                style={styles.Btn}>
                <Text style={styles.TxtBtn}>Crear</Text>
            </TouchableOpacity>
        </View>
    ),
});

// set by a default value in componentDidMount to make the next button disable initially
componentDidMount() {
    this.props.navigation.setParams({ isDisable: true });
}

render() {
    let datos = [{
        value: 'Banana',
    }, {
        value: 'Mango',
    }, {
        value: 'Pear',
    }];
    var data = {
        textData: this.state.textData
      }
    return (
        <View style={styles.container}>
            <View style={styles.BoxandInput}>
                <View style={styles.ContainerInput}>
                    <TextInput
                        style={styles.Input}
                        multiline
                        placeholder='Escriba una Descripcion'
                        placeholderTextColor="rgb(196,196,196)"
                        maxLength={203}
                    />
                </View>
                <View style={styles.Box}>
                    <ImageBackground
                        source={require('../Icons/Regalo.png')}
                        style={styles.Image}>
                        <View style={styles.ContainerText}>
                            <Text style={styles.TextBox}>{data}</Text>
                        </View>
                    </ImageBackground>
                </View>
            </View>
            <View style={styles.Regalos}>
                <View style={{ justifyContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
                    <Text style={styles.line}>--------------------------</Text>
                    <Text style={styles.RegalosText}>Cantidad de Regalos</Text>
                    <Text style={styles.line}>--------------------------</Text>
                </View>
                <View style={{ justifyContent: 'center', alignItems: 'center', marginTop: 30 }}>
                    <TextInput
                        style={styles.RegalosInput}
                        placeholder='0'
                        placeholderTextColor='#000'
                        maxLength={6}
                        type='numeric'
                    />
                    <View style={styles.LineInput} />
                    <Text style={{ fontSize: 10, color: '#ccc', textAlign: 'center', marginTop: 5 }}>60 regalos Disponibles</Text>
                    <TouchableOpacity style={{ marginTop: 15 }}>
                        <Text style={{ fontSize: 10, color: 'cyan', textAlign: 'center' }}>Comprar Regalos</Text>
                    </TouchableOpacity>
                </View>
            </View>
            <View style={styles.ContainerServices}>
                <View style={{ justifyContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
                    <Text style={styles.line}>-----------------------------------</Text>
                    <Text style={styles.RegalosText}>Servicios</Text>
                    <Text style={styles.line}>-----------------------------------</Text>
                </View>
                <Dropdown
                    dropdownMargins={{ min: 5, max: 10 }}
                    label='Favorite Fruit'
                    data={datos}
                />
            </View>
        </View>
    );
}

導出默認值

這個問題

Answer 1

您可以創建一個數據對象，並將其與導航一起發送到下一個UI。 您可以將數據對象從UI 1傳遞到UI 2，然后可以從UI 2將其發送給UI 3。

在第一個用戶界面中，您可以創建數據變量，例如

var data = {
   textData: text
}

將以上代碼包含在代碼的navigationOptions中。

然后在導航調用中還包括數據對象。

onPress={() => navigation.navigate('2', {data})}

在第二個UI中，將傳遞的值分配給構造函數內部的變量。

constructor(props) {
   super(props);
   this.state = {
     textData: this.props.navigation.state.params.data. textData,
   }
}

然后，當您要導航到第三個UI時，請創建一個數據變量並按照之前的操作進行發送。

var data = {
  textData: this.state.textData
}

將此參數與navigation.navigation一起傳遞，並從第二個UI中訪問它，類似於第二個UI。