如何使用NavigationExperimental显示导航栏

import {
  NavigationExperimental,
  StyleSheet,
  Text,
  View,
} from 'react-native';

const {
  CardStack: NavigationCardStack,
  Header: NavigationHeader,
} = NavigationExperimental;

class MyNavigationBar extends React.Component {
  render() {
    return (
      <NavigationHeader
        {...this.props}
        renderTitleComponent={this.renderTitleComponent}
      />
    );
  }

  renderTitleComponent = (props) => {
    return (
      <NavigationHeader.Title>
        <Text style={styles.title}>{props.scene.route.title}</Text>
      </NavigationHeader.Title>
    );
  }
}

class MyNavigationStack extends React.Component {
  render() {
    return (
      <NavigationCardStack
        navigationState={this.props.navigationState}
        renderScene={this.renderScene}
        renderHeader={this.renderHeader}
      />
    );
  }

  renderScene = (props) => {
    return (
      <View style={styles.scene}>
        <Text>{props.scene.route.title}</Text>
      </View>
    );
  }

  renderHeader = (props) => {
    return (
      <MyNavigationBar {...props} />
    );
  }
}

const initialNavigationState = {
  index: 0,
  routes: [
    { key: 'home', title: 'Home' },
    { key: 'about', title: 'About' },
    { key: 'contact', title: 'Contact' },
  ],
};

const navigationReducer = (state, action) => {
  switch (action.type) {
    case 'push':
      return {
        ...state,
        index: state.index + 1,
        routes: [...state.routes, action.route],
      };
    case 'pop':
      return {
        ...state,
        index: state.index - 1,
        routes: state.routes.slice(0, state.index),
      };
    default:
      return state;
  }
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      navigationState: initialNavigationState,
    };
  }

  render() {
    return (
      <MyNavigationStack
        navigationState={this.state.navigationState}
        onNavigate={this.handleNavigation}
      />
    );
  }

  handleNavigation = (action) => {
    switch (action.type) {
      case 'push':
        this.setState((prevState) => ({
          navigationState: navigationReducer(prevState.navigationState, action),
        }));
        break;
      case 'pop':
        this.setState((prevState) => ({
          navigationState: navigationReducer(prevState.navigationState, action),
        }));
        break;
      default:
        break;
    }
  }
}