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

Question

我想使用一个值，在Step4.js中的Step3.js文件中，值可以在Step3中的用户输入后改变。但是如何在Step4中使用此值？

我尝试了一些东西，但我想我在这里错过了这一点，所以希望有人可以帮我解决这个问题。

这是我的代码：

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

所以我想使用Step3中状态的日期选入Step4.js，我该怎么做？

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

建议你使Step3和Step4组件无状态，只接收道具并创建一个组件Stepper，它将同时呈现Step3和Step4。步进器组件将执行所有状态操作。

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}  />
        ];
    }
}

而Step3看起来像这样：

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

希望你明白这个主意。

Answer 2

复制从类似的question粘贴我的答案

我通常创建一个包含以下内容的global.js：

module.exports = {
   step3State: null,
};

并在屏幕上获取状态的值

render() {

GLOBAL.step3State = this;
//enter code here

}

现在你可以在任何地方使用它：

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

要么

Global.step3State.state.value