Requirements: Jump from MainScreen to MessageScreen, which has a customized TitleBar and three Tab layouts.

You cannot customize the Title using the following methods

import { TabNavigator } from "react-navigation";

class RecentChatsScreen extends React.Component {
  render() {
    return <Text>List of recent chats</Text>
  }
}

class AllContactsScreen extends React.Component {
  render() {
    return <Text>List of all contacts</Text>
  }
}

const MessageNavigator = TabNavigator({
  Recent: { screen: RecentChatsScreen },
  All: { screen: AllContactsScreen },
});Copy the code
const SimpleApp = StackNavigator({
  Main: { screen: MainScreen },
  Message: { screen: MessageNavigator },
});Copy the code

Solution: Nest the Navigator in the component

In addition, the router needs to be passed to facilitate the child page to obtain navigation

class MessageWrappingScreen extends React.Component {
  render() {
    return (
      <View>
        <TitleBar/>
        <MessageNavigator  navigation={this.props.navigation}/>
      </View>
    );
  }
}
MessageWrappingScreen.router = MainScreen.router;Copy the code
const SimpleApp = StackNavigator({
  Main: { screen: MainScreen },
  Message: { screen: MessageWrappingScreen },
});Copy the code

Document links: reactnavigation.org/docs/intro/…