Как я могу настроить строку заголовка с избыточным состоянием, чтобы значок заголовка изменялся динамически? - PullRequest
Новая
       16

Как я могу настроить строку заголовка с избыточным состоянием, чтобы значок заголовка изменялся динамически?

0 голосов
/ 22 октября 2019

Я собираюсь реализовать панель заголовка со значком уведомления. когда уведомление получено, значок уведомления на панели заголовка должен быть заменен другим значком уведомления. Как я могу реализовать это с помощью Redux? Я думаю, что для этого нужно подходящее решение. но я не уверен, как я могу связать заголовок реагировать с редуксом 

  static navigationOptions = {
    title: "...",
    headerRight: (
      <Image
        source={require("../../../assets/notification_grey.png")}
      />
    ),
  };

Так, когда новое уведомление получено, тогда этот правый значок заголовка должен быть обновлен до другого значка (notification_blue.png)

1 Ответ

1 голос
/ 22 октября 2019

Вы можете создать новый компонент для своего заголовка, подключить его к Redux, как это было бы сделано для любого другого компонента, и передать его навигатору.

Например:

ЗаголовокКомпонент: 

import React from 'react'

class HeaderRight extends React.Component {
  render() {
    // Show something about your notifications
    return <View>{this.props.notifications.length}</View>
  }
}

const mapStateToProps = state => ({
  // Get your notifications from the Redux state
  notifications: state.something.notifications,
})

export default connect(mapStateToProps)(HeaderRight)

Навигатор: 

static navigationOptions = {
  title: "...",
  headerRight: () => <HeaderRight />,
}

У вас есть другие способы передачи компонента Header в навигатор, это всего лишь пример, здесь выможно найти несколько альтернатив.

...