Question

我有一个反应导航堆栈，其中有两个屏幕：Landing和PreLoginQuestion

Landing.js

import React, { Component } from 'react';
import { View, Button } from 'react-native';
import Api from '../services/Api';
import { NavigationActions } from 'react-navigation';

export default class Landing extends Component {

preLoginDataURL = 'pre-login/data/get';

constructor(props) {
    super(props);
    this.state = { data: null };
}

async componentDidMount() {
    try {
        const response = await Api.getData(this.preLoginDataURL);
        this.setState({ data: response.data });
    } catch (err) {
        console.error(err);
    }
}

onNextStepsPress = () => {
    console.log('In next steps');
    this.props.navigation.navigate('Question', {
        data: this.state.data
    });
};

render() {
    return (
        <View>
            <Button title="Next Steps" onPress={this.onNextStepsPress} />
        </View>
    );
}
}

PreLoginQuestion.js

export default class PreLoginQuestion extends Component {

constructor(props) {
    super(props);
    this.navigation = this.props.navigation;
    this.data = this.navigation.state.params.data;
    console.log(this.data);
}

render() {
    return (
        <View>
            <Text>Pre login question Component</Text>
        </View>
    );
}
}

我正在将数据作为参数从Landing组件发送到PreLoginQuestion组件。一开始它为null，但是当从api中检索它时，我想在PreLoginQuestion组件中获取该更新值。所以我的问题是，如何更改已发送的参数，以便可以在导航屏幕（PreLoginQuestion）中获得更改的值？

我已经尝试过NavigationActions.setParams()进行分派，但是无法正常工作。

我对本机和对本机的反应非常陌生，所以如果我没有使用正确的方法，请原谅我：D

Answer 1

一种选择是在发出网络请求时在ActivityIndicator组件上呈现Landing组件。像这样：

import React, { Component } from 'react';
import { View, Button, ActivityIndicator } from 'react-native';
import Api from '../services/Api';
import { NavigationActions } from 'react-navigation';

export default class Landing extends Component {

preLoginDataURL = 'pre-login/data/get';

constructor(props) {
    super(props);
    this.state = { data: null };
}

async componentDidMount() {
    try {
        const response = await Api.getData(this.preLoginDataURL);
        this.setState({ data: response.data });
    } catch (err) {
        console.error(err);
    }
}

onNextStepsPress = () => {
    console.log('In next steps');
    this.props.navigation.navigate('Question', {
        data: this.state.data
    });
};

render() {
    return (
        <View>
            {this.state.data ?
            <Button title="Next Steps" onPress={this.onNextStepsPress} /> :
            <ActivityIndicator/>}
        </View>
    );
}
}

然后，一旦导航到该PreLoginQuestion，就可以保证有可用的数据。希望对您有所帮助：）

Answer 2

我认为您应该在PreLoginQuestion组件（位于componentDidMount中）中调用api

或使用状态管理功能（redux或mobx）。当获取响应调度数据时，您可以轻松地从reducer获取数据。

导航后如何更新参数？

2 个答案: