Обновить значение в пользовательском заголовке StackNavigation

Question

Я определил пользовательское представление как компонент для свойства headerRight в navigationOptions как ниже:

  static navigationOptions = ({ navigation }) => {
    return {
      headerRight: navigation.getParam('headerRight', null),
    };
  };  

, а затем в componentDidMount:

this.props.navigation.setParams({
  headerRight: (<MessageDetailsHeader {...this.props}
              title = {this.state.headerTitle}
              subTitle = {this.state.headerSubTitle}
              online = {this.state.online}
            />)
 })

также я определил некоторое состояние для обновления значений:

  constructor(props) {
    super(props);
    this.state = {

      headerTitle: null,
      headerSubTitle: null,
      headerOnline: false
    };
  }

Компонент пользовательского представления заголовка, определенный ниже:

    export default class MessageDetailsHeader extends React.Component {

      constructor(props) {
        super(props);

        this.state = {
          title: this.props.title,
          subTitle: this.props.subTitle,
          online: this.props.online
        };
      }
  componentWillReceiveProps(nextProps) {
    this.setState({
      title: nextProps.title,
      subTitle: nextProps.subTitle,
      online: nextProps.online,
    })
  }


  render() {
    return (
      <View style={styles.headerContainer}>
        <View style={styles.headerDetailsContainer}>
          <Text style={styles.headerTitle}>{this.state.title}</Text>
          <Text style={styles.headerSubTitle}>{this.state.subTitle}</Text>
        </View>
        <Avatar small rounded source={require('../images/no-profile.png')} activeOpacity={0.7} avatarStyle={this.state.online? styles.avatarOnline: styles.avatarOffline}/>
      </View>
    );
  }
}

Мне нужно вызвать setState на экране и затем обновить пользовательский вид в заголовке навигации, это правильный путь?

Заранее спасибо

Answer 1

Решено!

  static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;
    return {
        headerRight: <MessageDetailsHeader 
                        title={params.headerTitle} 
                        subTitle={params.headerSubTitle} 
                        online={params.headerOnline}
                      />
    };
};

, а затем вызвано ниже, чтобы легко установить новое значение!

  this.props.navigation.setParams({ 
    headerSubTitle: 'online',
  });