需求:由主页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 },
});