Как обновить счетчик в шапке навигации сразу при получении новой Подписки?

я использую подписку на 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
      );

}
}

Я получу данные внутри тега подписки при создании нового пользователя

Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
0
0
331
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Компонент перерисовывается бесконечно.

Basha K 19.03.2019 09:09

убедитесь, что вы проверяете, что ваш новый data не равен old data и вызываете setParam только тогда, когда доступны новые данные ... он отображает причину бесконечно, если (данные) всегда верны .. проверьте редактирование, пожалуйста

Hend El-Sahli 19.03.2019 09:13

круто, теперь он работает, после того как я внес небольшое изменение, т. е. использовал вызов const newData = navigation.getParam('данные'); вне метода возврата.

Basha K 19.03.2019 11:10

Другие вопросы по теме