React-native 如何在另一个 javasript 文件中使用状态值

Question

I want to use a value, from the file Step3.js in Step4.js, the value can change after user input in Step3. But how can I use this value in Step4?

I have tried some things, but I guess I miss the point here, so hopefully somebody can help me out with this.

This is my code:

App.js:

 import React, { Component } from 'react' import { AppRegistry, StyleSheet, View, Text } from 'react-native' import { ViewPager } from 'rn-viewpager' import StepIndicator from 'react-native-step-indicator' import Step1 from "./Step1"; import Step2 from "./Step2"; import Step3 from "./Step3"; import Step4 from "./Step4"; const PAGES = [{id: 1, page: <Step1/>},{id: 2, page: <Step2/>}, {id: 3, page: <Step3/>}, {id: 4, page: <Step4/>}]; const firstIndicatorStyles = { stepIndicatorSize: 30, currentStepIndicatorSize: 40, separatorStrokeWidth: 5, currentStepStrokeWidth: 3, separatorFinishedColor: '#4aae4f', separatorUnFinishedColor: '#a4d4a5', stepIndicatorFinishedColor: '#4aae4f', stepIndicatorUnFinishedColor: '#a4d4a5', stepIndicatorCurrentColor: '#ffffff', stepIndicatorLabelFontSize: 15, currentStepIndicatorLabelFontSize: 15, stepIndicatorLabelCurrentColor: '#000000', stepIndicatorLabelFinishedColor: '#ffffff', stepIndicatorLabelUnFinishedColor: 'rgba(255,255,255,0.5)', labelColor: '#666666', labelSize: 12, currentStepLabelColor: '#4aae4f' }; export default class App extends Component { constructor (props) { super(props); this.state = { currentPosition: 0, stepCount: 4, } } componentWillReceiveProps (nextProps, nextState) { if (nextState.currentPosition != this.state.currentPosition) { if (this.viewPager) { this.viewPager.setPage(nextState.currentPosition) } } } render () { return ( <View style={styles.container}> <ViewPager style={{ flexGrow: 1 }} ref={viewPager => { this.viewPager = viewPager }} onPageSelected={page => { this.setState({ currentPosition: page.position }) }} > {PAGES.map(page => this.renderViewPagerPage(page))} </ViewPager> <View style={styles.stepIndicator}> <StepIndicator customStyles={firstIndicatorStyles} currentPosition={this.state.currentPosition} stepCount={this.state.stepCount} labels={['Kleur', 'Vorm', 'Moeite', 'Overzicht']} /> </View> </View> ) } renderViewPagerPage = (data) => { console.log(data); console.log(this.state.currentPosition); return ( <View key={data.id}> {data.page} </View> ) } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#ffffff' }, stepIndicator: { marginVertical: 20 }, });

Step3.js:

 export function getSelected3() { return this.state.selected; } class Step3 extends Component { constructor(props){ super(props); this.state = { happy: { "id" : "1", "name" : "happy", "src" : require('../../assets/images/makkelijk.png') }, normal: { "id" : "2", "name" : "normal", "src" : require('../../assets/images/gemiddeld.png'), }, sad: { "id" : "3", "name" : "sad", "src" : require('../../assets/images/moeilijk.png'), }, selected: { "id" : "4", "name" : "", "src" : require('../../assets/images/moeilijk.png'), }, }; } onPress = (item) => { this.state.selected.name = item.name; this.state.selected.src = item.src; alert(this.state.selected.name); }; render() { return ( <View style={styles.container}> <View style={[styles.box]}> <TouchableHighlight onPress={() => this.onPress(this.state.happy)}> <Image style={styles.image} source={this.state.happy.src} /> </TouchableHighlight> </View> <View style={[styles.box]}> <TouchableHighlight onPress={() => this.onPress(this.state.normal)}> <Image style={styles.image} source={this.state.normal.src} /> </TouchableHighlight> </View> <View style={[styles.box]}> <TouchableHighlight onPress={() => this.onPress(this.state.sad)}> <Image style={styles.image} source={this.state.sad.src} /> </TouchableHighlight> </View> </View> ) } }

So I want to use the date from the state in Step3 selected into Step4.js, How can I Do this?

Step4.js:

class Step4 extends Component {
constructor(props) {
    super(props);
    this.state = {
        value3: {
            "id": "3",
            "name" : "",
            "src" : "",
        },
    };
}

render() {

    let test = getSelected3();  
    this.state.value3.src = value3.src;
    return (
        <View style={styles.container}>
            <View style={[styles.box]}>
                <TouchableHighlight>
                    <Image
                        style={styles.image}
                        source={this.state.value3.src}
                    />
                </TouchableHighlight>
            </View>
            <View style={[styles.box]}>
                <TouchableHighlight>
                    <Image
                        style={styles.image}
                        source={this.state.value3.src}
                    />
                </TouchableHighlight>
            </View>
            <View style={[styles.box]}>
                <TouchableHighlight>
                    <Image
                        style={styles.image}
                        source={this.state.value3.src}
                    />
                </TouchableHighlight>
            </View>
        </View>
    )
}

Answer 1

Suggest you to make Step3 and Step4 components stateless which will receive only props and create a component Stepper which will render both Step3 and Step4. Stepper component will do all the state manipulations.

class Stepper extents Component {
    render() {
        const { state1, state2, state3, state4, onPress } = this.state;

        return [
            <Step3 state1={state1} state3={state3} onPress={onPress} />,
            <Step4 state2={state2} state4={state4}  />
        ];
    }
}

And Step3 would look like this:

const Step3 = ({ state1, state2, onPress }) => {
    return (<TouchableHighlight onPress={onPress}></TouchableHighlight);
};

Hope you get the idea.

Answer 2

Copy pasting my answer from a similar question

I usually create a global.js containing:

module.exports = {
   step3State: null,
};

And get the value of the state on the screen

render() {

GLOBAL.step3State = this;
//enter code here

}

Now you can use it anywhere like so:

GLOBAL.step3State.setState({
    var: value
});

or

Global.step3State.state.value