web-dev-qa-db-fra.com

Naviguer vers un écran différent d'un bouton dans un en-tête

J'utilise le nouveau React-navigation de react-native. J'ai la navigation comme suit:

StackNavigator:

  1. TabNavigator // HomeNavigation
  2. TabNavigator // NotificationNavigation

Code complet:

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 a un en-tête et l'en-tête a un composant correct de SearchNotification. SearchNotification a une icône qui sur la presse, je voudrais aller à la NotificatoinNavigation.

Toutefois, si j'apporte des modifications à l'en-tête de HomeNavigation de cette manière, la fonction SearchNotification ne s'affiche pas dans l'en-tête.

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

Comment puis-je accéder à différents écrans à partir d'un bouton dans un en-tête?

reactjsreact-native
22
Kakar

Donc, le problème était (je pense), à ​​l'intérieur de navigationOptions au lieu d'utiliser navigations, je devais utiliser navigate et le transmettre comme accessoire à l'enfant (c'est-à-dire le SearchNotification ).

Donc, le code final ressemble à ceci:

HomeNavigation.navigationOptions = {
    title: 'Home',
    header: ({navigate}) => ({
        right: (
            <SearchNotification navigate={navigate}/>
        ),
    }),
};

Et dans le composant SearchNotification composant:

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

Code qui a fonctionné pour moi:

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

Et pour passer à un autre écran:

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