React Navigation - 设置参数而不导航到场景答案

【问题标题】：React Navigation - Setting params without navigating to the sceneReact Navigation - 设置参数而不导航到场景
【发布时间】：2018-03-28 00:43:59
【问题描述】：

我想在我的标题中添加一个“重新加载”按钮，我正在通过调用 setParams.问题是这会导致 TabNavigator 在启动时导航到选项卡

 export default class FeedScreen extends React.Component {
    static navigationOptions = ({ navigation }) => {
        const { params } = navigation.state;
        if (params) {
            return {
                headerRight: <Icon.Button 
                    color="black" 
                    backgroundColor="transparent" 
                    underlayColor="transparent"
                    name="reload" 
                    onPress={ params.reload }
                />
            };
        }
    }

    constructor (props) {
        super(props);

        // We want to set attach a reload function to the navigation
        this.props.navigation.setParams({
            reload: this._reloadFeed.bind(this)
        });
    }

那么有没有办法 setParams 不能导航到这个场景，或者有没有办法在不调用 setParams 的情况下将功能分配给这个图标？

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

您是否尝试过将 onPress={ params.reload } 设置为 onPress={() => params.reload()}？

 export default class FeedScreen extends React.Component {
    static navigationOptions = ({ navigation }) => {
        const { params } = navigation.state;
        if (params) {
            return {
                headerRight: <Icon.Button 
                    color="black" 
                    backgroundColor="transparent" 
                    underlayColor="transparent"
                    name="reload" 
                    onPress={ () => params.reload() }  < -----
                />
            };
        }
    }

    constructor (props) {
        super(props);

        // We want to set attach a reload function to the navigation
        this.props.navigation.setParams({
            reload: this._reloadFeed.bind(this)
        });
    }

【讨论】：

没有影响

【解决方案2】：

您可能正在寻找Navigation Actions，特别是称为“setParams”的导航操作（不要与navigation.setParams() 混淆），您可以通过以下方式发送它：navigation.dispatch(myCreatedSetParamsAction)

【讨论】：

不幸的是，这仍然会导致导航到场景
@user1537360 也许你不需要 .bind 你的 _reloadFeed 函数。而且，也许，您应该在 navigatorConfig 中设置 initialRouteParams 而不是在构造函数中设置 setParams。

【解决方案3】：

我可以通过从头文件中调用一个静态函数来解决这个问题，并将该静态函数更新为我在 componentDidMount 中的重载函数。这很 hacky 但很有效。

我的组件之外的功能：

let _reloadFunction = () => {
    // This exists because react navigation is a mess
}

导航选项

    static navigationOptions = {
        headerRight: <Icon.Button 
                        color="black" 
                        backgroundColor="transparent" 
                        underlayColor="transparent"
                        name="reload" 
                        onPress={() => { _reloadFunction() }}
                    />
    }

在组件中：

        // Gonna update that reloadFunction so the header works
        _reloadFunction = this._reloadFeed.bind(this);

【讨论】：