reactjs – 从标题中的按钮导航到不同的屏幕

发布时间：2020-12-15 06:25:23 所属栏目：百科来源：网络整理

导读：我正在使用新的 React-navigation从反应本地。我有导航如下： StackNavigator： TabNavigator // HomeNavigation TabNavigator // NotificationNavigation 全部代码： const MainNavigation = StackNavigator({ Home: { screen: HomeNavigation,},Notificati

我正在使用新的 React-navigation从反应本地。我有导航如下：

StackNavigator：

> TabNavigator // HomeNavigation
> 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有一个标题，标题具有SearchNotification的正确组件。 SearchNotification有一个图标，按照我想去“通知导航”。

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

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

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

所以问题是(我想)，在navigationOptions中，而不是使用导航，我不得不使用导航，并将其作为道具传递给孩子(即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>
        )
    }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!