Question

我希望将我的变量的状态（从textInput获得值）发送给化简器，并通过我发送的变量的状态更改该化简器的状态，这样我就可以显示使用mapStateToProps在不同的屏幕中显示它，而我在全局获取它。

有没有办法做到这一点？我研究并找到了示例，但没有找到想要的方法。

我澄清我的代码只是一个示例，以便您理解我想做的事，不要以它为指导，因为我不知道它是否可以那样工作

我向您展示了一些代码，让您对我的想法

 import React, { Component } from "react";
    import {
        View,
        Text,
        StyleSheet,
        TextInput,
        TouchableOpacity
    } from "react-native";

    import { connect } from 'react-redux';

    class ScreenHome extends Component {
        static navigationOptions = {
            header: null
        }
        constructor(props) {
            super(props);
            this.state = {
                Texto: '',
            }
        }

        render() {
            this.props.ChangeState({type: 'ACTION_TYPE', Texto: this.state.Texto});
            const { navigation } = this.props;
            return (
                <View style={styles.container}>
                    <TextInput
                        placeholder="Enter Text"
                        value={this.state.Texto}
                        onChangeText={Texto => this.setState({ Texto })}
                    />
                    <View style={{ marginBottom: 10, marginTop: 10, backgroundColor: 'black', padding: 10 }}>
                        <TouchableOpacity onPress={this.props.ChangeState}>
                            <Text style={{ color: 'white' }}>Send Text Input status to the reducer</Text>
                        </TouchableOpacity>
                    </View>
                    <View>
                        <TouchableOpacity style={{ backgroundColor: 'blue', padding: 10 }} onPress={() => { navigation.navigate('Other') }}>
                            <Text style={{ color: '#fff' }}>Go</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            );
        }
    }
    const mapStateToProps = (state) => {
        return {
            // prop: state.prop
        }
    }

    const mapDispatchToProps = (dispatch) => {
        return {
             ChangeState: () => {
            //     dispatch({ type: 'ACTION_TYPE', Texto: this.state.Texto });
             }
        }
    }

    export default connect(mapStateToProps, mapDispatchToProps)(ScreenHome)

    const styles = StyleSheet.create({
        container: {
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center'
        }
    });

其他屏幕：

    import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity
} from "react-native";

import { connect } from 'react-redux';

class ScreenOther extends Component {
    static navigationOptions = {
        header: null
    }
    render() {
        const { navigation } = this.props;
        return (
            <View style={styles.container}>
                <Text>{this.props.StateInitial}</Text>
                <TouchableOpacity onPress={() => { navigation.navigate('Home') }}>
                    <Text>Go back</Text>
                </TouchableOpacity>
            </View>
        );
    }
}
const mapStateToProps = (state) => {
    return {
        StateInitial: state.reducerText
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
    //    ChangeState: () => {
    //          dispatch({type: 'CHANGE_TEXT'})
    //     }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(ScreenOther)

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }
});

商店

import { createStore, combineReducers } from 'redux';

const reducerText = (state = [0], action) => {
    switch (action.type) {
        case 'ACTION_TYPE':
        return {...state, Texto:action.Texto};

        default:
            return state;
    }
};

const Reducers = combineReducers({
    reducerText
})

const Store = createStore(Reducers)

export default Store;

Answer 1

dispatch1应该在主屏幕的道具中可见。因此，如果您这样做

this.props.dispatch1({type: 'YOUR_ACTION_TYPE', Text: this.state.Text});

可以在您可以执行的地方调用reducer函数：

reducer: (state, action) => {
     switch (action.type) {
       case 'YOUR_ACTION_TYPE':
        return {...state, Text:action.Text};
     }
  }

然后在另一个屏幕中，您将获得更改的文本道具。

Answer 2

对于那些看过这篇文章并想做类似事情的人，我的意思是将textInput变量的状态发送给reducer并从另一个带有redux的屏幕中查询该状态，请随时查看下面将要保留的代码因为我一直在调查，一段时间后才知道。

这是 redux格式

的代码

import React, { Component } from "react";
import {
    View,
    TextInput,
    StyleSheet,
    Button,
    Text
} from "react-native";

import { Field, reduxForm } from 'redux-form';

import { connect } from 'react-redux';

const ScreenFormHome = (props) => (
    <View>
        <Field name="Text" component={fieldNombre} ph="Enter Text" />
        <Button title="Send Dispatch" onPress={props.handleSubmit((values) => props.SendDispatch(values))} />
    </View>
);

const fieldNombre = (props) => (

    <View style={styles.textInput}>
        <TextInput
            placeholder={props.ph}
            onChangeText={props.input.onChange}
            value={props.input.value}
            autoCapitalize="none"
            onBlur={props.input.onBlur}
        />
        <View style={styles.linea} />
    </View>

);

const styles = StyleSheet.create({
    textInput: {
        marginBottom: 16,
    },
    linea: {
        backgroundColor: '#DCDCDC',
        height: 2,
    },
});

const mapDispatchToProps = (dispatch) => {
    return {
        SendDispatch: (values) => {
            dispatch({ type: 'ACTION_TYPE', Text: values.Text })
        }
    }
}
const mapStateToProps = (state) => {
    return {
        //  StateInitial: state.reducerText
    }
}

export default reduxForm({
    form: 'ScreenFormHome',
})(connect(mapStateToProps, mapDispatchToProps)(ScreenFormHome));

这是组件代码

 import React, { Component } from "react";
    import {
        View,
        Text,
        StyleSheet,
        TouchableOpacity
    } from "react-native";

    import ScreenFormHome from "./ScreenFormHome";

    class ScreenHome extends Component {

        static navigationOptions = {
            header: null
        }

        render() {
            const { navigation } = this.props;
            return (
                <View style={styles.container}>
                    <TouchableOpacity style={{ backgroundColor: 'blue', padding: 10, marginBottom: 10 }} onPress={() => { navigation.navigate('Other') }}>
                        <Text style={{ color: '#fff' }}>Go</Text>
                    </TouchableOpacity>
                    <ScreenFormHome />
                </View>
            );
        }
    }

    export default ScreenHome;

    const styles = StyleSheet.create({
        container: {
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center'
        }
    });

这是商店代码

import { createStore, combineReducers } from 'redux';

import { reducer as form } from 'redux-form'

const reducerText = (state = [], action) => {
    switch (action.type) {
        case 'ACTION_TYPE':
            return (action.Text)
        default:
            return state;
    }
};


const Reducers = combineReducers({
    reducerText,
    form
})

const Store = createStore(Reducers)

export default Store;

如何通过分派将文本输入变量的状态发送到化简器，并将其显示在另一个屏幕上？

2 个答案: