从标题中的按钮导航到不同的屏幕 [英] Navigate to different screen from a button in a header

问题描述

我正在使用 react-native 的新 React-navigation.我的导航如下:

I am using the new React-navigation from react-native. I have the navigation as follows:

堆栈导航器:

1. TabNavigator//主页导航
2. TabNavigator//通知导航

完整代码:

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 has a header, and the header has a right component of SearchNotification. SearchNotification has an icon which on press I would like to go to the NotificatoinNavigation.

但是，如果我将 HomeNavigation 的标题更改为这种方式，则 SearchNotification 不会显示在标题中.

However, if I make changes to the header of HomeNavigation to this way, the SearchNotification is not displayed in the header.

HomeNavigation.navigationOptions = {
    title: 'Home',
    header: {
        tintColor: 'white',
        style: {
            backgroundColor: '#2ec76e',
        },
        right: ({navigate}) => <SearchNotification navigate={navigate}/>
    },
};

如何从标题中的按钮导航到不同的屏幕?

How can I navigate to different screen from a button in a header?

推荐答案

所以问题是(我认为)，在 navigationOptions 内部而不是使用 navigations 我不得不使用navigate，并将其作为道具传递给孩子(即SearchNotification).

So the problem was (I think), inside the navigationOptions instead of using navigations I had to use navigate, and pass it as a props to the child (i.e. the SearchNotification).

所以最终的代码是这样的:

So the final code looks like this:

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

这篇关于从标题中的按钮导航到不同的屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！