解決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/…