javascript - 如何使用 native react 在另一个屏幕上发送并显示文本输入的值？

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>
    );
}

} 导出默认

This Problem

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
}

使用navigate.navigation传递此变量，并从与第二个UI类似的第三个UI访问它。