时间戳

首页 > 解决方案 > 反应导航+流星+ redux，navigationOption不被尊重或不应用

react-native - 反应导航+流星+ redux，navigationOption不被尊重或不应用

问题描述

我有疑问，这是我的代码：

import React, { Component } from 'react';
import Meteor, {
  withTracker,
} from 'react-native-meteor'
import { connect } from 'react-redux';
class CreateCommunityContainer extends React.Component{

   static navigationOptions = {
       title: 'Community',
       headerRight: (
            <TouchableOpacity onPress={() => {
                this.testFunction(par);
            }}>
                <View style={{marginRight:5}}>
                   <Text>NEXT</Text>
                </View>
            </TouchableOpacity>),
    };

    testFunction(par){
    ... some code
    }

    render(){
        ...some code
    }

}

const CreateCommunityMeteor = withTracker(({userId}) => {
   ...some code         
})(CreateCommunityContainer);

export default connect(mapStateToProps, mapDispatchToProps)(CreateCommunityMeteor);

我的问题是为什么 navigationOption 不被尊重或不应用，我希望 navigationOption 在标题栏中给我标题“社区”，但事实并非如此。但是如果我把它放在导航路由器中，它会像往常一样工作，以及如何使它生效。顺便说一句，我需要在屏幕类而不是路由器中定义 navigationOption，所以我可以从反应导航的 headerRight 组件调用该类中的功能。

标签： react-nativemeteorreact-reduxreact-navigation

解决方案

由于您已经提到如果没有withTracker流星功能，您的组件会按预期运行，我认为问题在于withTracker没有将静态属性带入它创建的新组件中。

您可以尝试navigationOptions在组件上设置属性CreateCommunityMeteor：

const CreateCommunityMeteor = ...

CreateCommunityMeteor.navigationOptions = {
    ...
};

export default connect(...)

我还注意到您正在调用this静态函数 - 这不起作用，因为静态函数无权访问类实例。

同样，我建议的静态函数也无法访问它。

为了解决这个问题，你可以设置navigationOptions为一个函数：({navigation}) => {...}并将你需要的作为参数传递给路由。

推荐阅读