Picture:

Snack:
https://snack.expo.io/@aimodding/clock2head

In the file AppbarExample.js, I declared state:
state={str:'hello'};

How to transfer this state to the header instead of subtitle?

Here's the code
/* @flow * /

import * as React from'react';
import {View, Platform, StyleSheet} from'react-native';
import {
  Colors,
  Appbar
  Paragraph,
  withTheme,
} from'react-native-paper';
import type {Theme} from'react-native-paper/types';

type Props={
  navigation: any,
  theme: Theme,
};

const initialParams={
  showLeftIcon: true
  showSubtitle: true
  showSearchIcon: true
  showMoreIcon: true
};

const MORE_ICON=Platform.OS ==='ios'?'more-horiz':'more-vert';

class AppbarExample extends React.Component<Props>{

  static navigationOptions=({navigation})=>{
    const params={...initialParams,...navigation.state.params};

    return {
      header :(
      <Appbar.Header>
          {params.showLeftIcon&&(;
          <Appbar.BackAction onPress={()=>navigation.goBack()}/>
          )}
        <Appbar.Content
            title="Title"
            subtitle={params.showSubtitle?'subtitle': null}
          />
          {params.showSearchIcon&&(
          <Appbar.Action icon="search" onPress={()=>{}}/>
          )}
          {params.showMoreIcon&&(;
          <Appbar.Action icon={MORE_ICON} onPress={()=>{}}/>
          )}
      </Appbar.Header>
      ),
    };
  };

  state={str:'hello'};

  render() {
    const {
      navigation,
      theme: {
        colors: {background},
      },
    }=this.props;
    const params={...initialParams,...navigation.state.params};


    return(
    <View
        style={[
          styles.container,
          {
            backgroundColor: background,
          },
        ]}>
      <Paragraph>{this.state.str}</Paragraph>
    </View>
    );
  }
}

const styles=StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.white,
    paddingVertical: 8,
  },
});

export default withTheme(AppbarExample);

1 Answers 1

In the constructor, you can apply something like this
this.props.navigation.setParams({
     makeSaveRequestCallback: this.makeSaveRequest.bind(this)
 });


And in the static method, this pass can be accessed as navigation.state.makeSaveRequestCallback();

It also works with the usual parameters.