从标题中的按钮导航到不同的屏幕答案

【问题标题】：Navigate to different screen from a button in a header从标题中的按钮导航到不同的屏幕
【发布时间】：2017-02-10 21:02:16
【问题描述】：

我正在使用来自 react-native 的新 React-navigation。我的导航如下：

堆栈导航器：

TabNavigator // 主页导航
TabNavigator // NotificationNavigation

完整代码：

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 有一个 header，并且 header 有一个 SearchNotification 的正确组件。 SearchNotification 有一个图标，按下时我想转到 NotificatoinNavigation。

但是，如果我以这种方式对 HomeNavigation 的标题进行更改，则标题中不会显示 SearchNotification。

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

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

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

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

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

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

【讨论】：

通过导航对我来说似乎被打破了。我认为传递导航然后使用导航功能是正确的，如下面的答案。

【解决方案2】：

对我有用的代码：

import Header from '../Containers/Header'
.........................................
navigationOptions: ({ navigation }) => ({
      title: 'Find User',
      headerRight: <Header navigation={navigation} />,
      headerStyle: styles.header
    })

然后移动到其他屏幕：

this.props.navigation.navigate('UserDetail', {});

【讨论】：

这是唯一对我有用的方法！救命稻草。