Question

我将自定义视图定义为NavigationOptions中headerRight属性的组件，如下所示：

  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',
  });

更新StackNavigation自定义标头中的值

1 个答案: