解决ReactNavigation中Navigator嵌套问题

需求：由主页MainScreen跳转到站内信页面MessageScreen，在MessageScreen存在自定义的TitleBar和3个Tab布局。

采用如下方式无法自定义Title

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

const SimpleApp = StackNavigator({
  Main: { screen: MainScreen },
  Message: { screen: MessageNavigator },
});

解决方案：在组件中嵌套Navigator
并且需要将router进行传递，方便子页面获取navigation

class MessageWrappingScreen extends React.Component {
  render() {
    return (
      <View>
        <TitleBar/>
        <MessageNavigator  navigation={this.props.navigation}/>
      </View>
    );
  }
}
MessageWrappingScreen.router = MainScreen.router;

const SimpleApp = StackNavigator({
  Main: { screen: MainScreen },
  Message: { screen: MessageWrappingScreen },
});

文档链接：reactnavigation.org/docs/intro/…