Реагирующий собственный пользовательский заголовок навигации не показан

Question

Я пытаюсь использовать пользовательский заголовок навигации, но он не отображается. Мои коды следующие:

Приложение. js

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

AppRoute вызывает мой файл маршрута route.js.

маршруты. 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 }},
});

Панель инструментов. 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

}

Зависимости

"@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"

Если я отображаю AppNavHeader непосредственно из routes.js, это работает, но я не хочу звонить оттуда по какой-то причине.

Answer 1

Я расскажу вам, как я реализовал то же самое. Я не доверяю реагировать навигационные пользовательские заголовки. Поэтому я сначала отключил заголовок реагирующей навигации:

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

в вашем стековом навигаторе.

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

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

, а затем на любой странице, где я хочу этот заголовок, я просто делаю:

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

}

Надеюсь, это поможет. не стесняйтесь сомнений

Answer 2

Я использую это так. Это работает. Вы можете попробовать

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

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