我正在使用来自react-native 的新的React-navigation。我的导航如下:
StackNavigator:
完整代码:
const MainNavigation = StackNavigator({ Home: { screen: HomeNavigation, }, Notification: { screen: NotificationNavigation, } }); const HomeNavigation = TabNavigator({ AllPost: { screen: All, }, ArticlePost: { screen: Article, }, BusinessPost: { screen: Job, }, }); HomeNavigation.navigationOptions = { title: 'Home', header: { right: <SearchNotification/> }, }; class SearchNotification extends React.Component { goToNotification = () => { this.props.navigate('Notification'); }; render() { return ( <View style={styles.container}> <TouchableOpacity> <Icon name="md-search" style={styles.Icon}/> </TouchableOpacity> <TouchableOpacity style={styles.notificationWrapper} onPress={this.goToNotification}> <Icon name="md-notifications" style={styles.Icon}/> <Text style={styles.number}>3</Text> </TouchableOpacity> </View> ) } } const NotificationNavigation = TabNavigator({ Comment: { screen: NotificationComment, }, Follow: { screen: NotificationFollow, } });
HomeNavigation有一个标头,并且标头具有SearchNotification的正确组成部分。SearchNotification有一个图标,我想按一下它就可以转到NotificatoinNavigation。
但是,如果我以此方式对HomeNavigation的标题进行了更改,则SearchNotification不会显示在标题中。
HomeNavigation.navigationOptions = { title: 'Home', header: { tintColor: 'white', style: { backgroundColor: '#2ec76e', }, right: ({navigate}) => <SearchNotification navigate={navigate}/> }, };
如何从标题中的按钮导航到其他屏幕?
所以问题是(我认为),在navigationOptions而不是使用里面,navigations我不得不使用navigate,并将其作为道具传递给孩子(即 SearchNotification )。
navigationOptions
navigations
navigate
因此,最终代码如下所示:
HomeNavigation.navigationOptions = { title: 'Home', header: ({navigate}) => ({ right: ( <SearchNotification navigate={navigate}/> ), }), };
在 SearchNotification 组件中:
export default class SearchNotification extends React.Component { goToNotification = () => { this.props.navigate('Notification'); }; render() { return ( <View style={styles.container}> <TouchableOpacity> <Icon name="md-search" style={styles.Icon}/> </TouchableOpacity> <TouchableOpacity style={styles.notificationWrapper} onPress={() => this.props.navigate('Notification')}> <Icon name="md-notifications" style={styles.Icon}/> <Text style={styles.number}>3</Text> </TouchableOpacity> </View> ) } }