未显示 React 本机自定义导航标题

Question

I'm trying to use a custom navigation header but it isn't showing. My codes are as follow :

App.js

<View style={styles.appWrapper}>
    <AppRoute />
</View>

AppRoute is calling my route file route.js .

routes.js

const PublicDrawer = createDrawerNavigator({
  'DashboardScreen': {screen: Dashboard}, // the screen where I want to show custom navbar
  'TaskDetailScreen': {screen: TaskDetail},
  'StartTaskScreen': {screen: StartTask}
}, {
  contentComponent: MainDrawer,
  drawerWidth: 300,
  initialRouteName: 'DashboardScreen' ,
  drawerPosition: 'left'
});

const Navigation = createStackNavigator({
  'MainRoutes': { screen: PublicDrawer, navigationOptions: { headerShown: false }},
});

Dashboard.js

export default class Dashboard extends Component<Props> {
  static navigationOptions =  ({ navigation }) => {
    return {
      header: <AppNavHeader navigation={navigation}/> // AppNavHeader from another file
    }
  };

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

  // The rest of the code

}

Dependencies

"@react-native-community/masked-view": "^0.1.6",
"@react-navigation/stack": "^5.0.0",
"react-native": "0.60.5",
"react-navigation": "^4.1.1",
"react-navigation-drawer": "^2.3.4",
"react-navigation-stack": "^2.1.1"

If I display AppNavHeader directly from routes.js it is working but I don't want to call it from there for some reason.

Answer 1

I'll tell you how ive implemneted the same. I dont trust react navigation custom headers. So what i did is first ive disabled the header of react navigation by :

{
    defaultNavigationOptions: {
      headerShown: false,
    },
    initialRouteName: 'HomeCard',
    transitionConfig: () => fromRight(),
  },

in your stack navigator.

Now next thing is ive created a header global component that can be used all over like :

export default class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <View style={headerStyles.newHeaderStyle}>
        <View style={{opacity: 0}}>
          <Image source={require('../assets/images/crossIcon.png')} />
        </View>
        <View style={{flexShrink: 1}}>
          <Text style={headerStyles.headerText}>{this.props.title}</Text>
        </View>
        <View style={{left: -20, paddingLeft: 10, marginLeft: 10}}>
          <TouchableOpacity
            style={headerStyles.imageView}
            hitSlop={{top: 20, bottom: 20, left: 50, right: 50}}
            onPress={() => this.props.navigation.goBack()}>
            <Image
              style={{height: 15, width: 15}}
              source={require('../assets/images/crossIcon.png')}
            />
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

and then in whatever page i want this header, i just do :

import Header from '../components/Header';

class Home extends Component {


render() {
    return (
      <SafeAreaView style={{flex: 1}}>
        <Header navigation={this.props.navigation} title="SUPPORT" />
        <ScrollView style={supportStyles.view1}>
          {this.renderSupportData()}
        </ScrollView>
      </SafeAreaView>
    );
  }

}

Hope it helps. feel free for doubts

Answer 2

i use it like this. Its work. You can try

static navigationOptions = ({ navigation }) => { return Header(navigation, enter code here ); }

return { headerTitle: ({title.toUpperCase()}), headerLeft: _leftButton, headerRight: _rightButton }