收到新订阅时如何更新导航标题中的计数？

Posted 2023-03-08

【中文标题】收到新订阅时如何更新导航标题中的计数？

【英文标题】：How to update the count in the navigation header right when a new Subscription is received?

【发布时间】：2019-08-09 15:36:29

【问题描述】：

我正在使用 graphql 订阅在创建新用户时获取更新，一切正常，我正在接收更新，但我无法从渲染方法更新导航标题中的通知计数。

class ContactsList extends Component 

static navigationOptions = ( navigation ) => 
    return 

        headerRight: (
            <View style= flexDirection: 'row' >
                <View style= marginEnd: 5 >
                    <Icon.Button
                        name="bell"
                        backgroundColor="#3b5998"
                        onPress=() => alert('Bell Pressed!!')>

                    **//i want update the count here when new contact is created** 
                    </Icon.Button>
                </View>
            </View>

        ),
    ;
;
render() 
    return (
        <View>
            <Subscription
                subscription=NEW_NOTIFICATION_SUBSCRIPTION
                variables= token: this.state.golbalDashboardToken  >
                ( data, loading ) => 
                    if (loading) 
                        // alert('Loading Subcription');
                        return <Text>Loading Subscription</Text>
                    
                    if (data) 

                        **// when new contact is created i will receive the data her**


                    

                
                  
            </Subscription>
        </View
      );

创建新用户时，我将收到订阅标签内的数据

【参考方案1】：

试试这个：

 if (data && data !== oldData) 

     **// when new contact is created i will receive the data her**
     this.props.navigation.setParams( data ); // << this
 

在导航选项中

<Icon.Button
          name="bell"
          backgroundColor="#3b5998"
          onPress=() => alert('Bell Pressed!!')>

          **//i want update the count here when new contact is created**
          const newData = navigation.getParam('data'); // this
 </Icon.Button>

【讨论】：

组件无限重新渲染。

确保检查新的data 不等于old data 并仅在新数据可用时调用 setParam ...它会无限地呈现原因 if (data ) 总是正确的.. 请检查编辑 plz

在我做了一个小改动之后，它现在的工作真棒，即使用 const newData = navigation.getParam('data'); 调用外部返回方法。跨度>