web-dev-qa-db-fra.com

React-native: mettre à jour dynamiquement le titre de l'en-tête dans le navigateur de pile

J'ai créé un composant personnalisé pour le titre de l'en-tête (navigateur de pile) qui affiche le nom d'utilisateur avec une image. Sur cette page, je dois modifier le nom d'utilisateur et en cas de succès Mettez-le également à jour dans l'en-tête

Donc ma question est Comment changer/mettre à jour le titre dynamiquement?

react-nativereact-navigation
7
shwetap

Cela peut être fait en utilisant les accessoires de navigation.

Vous pouvez utiliser this.props.navigation.state.params dans un composant pour définir une nouvelle propriété. Appel:

navigation.setParams({ param: value })

Voir la documentation sur les en-têtes pour plus de détails.

12
Tyler Whitman

Vous pouvez simplement changer l'en-tête en utilisant la méthode indiquée dans le code ci-dessous, ou celle de la documentation d'origine: React Navigation - en utilisant des paramètres dans le titre

 static navigationOptions = ({ navigation }) => {
    const edit = navigation.getParam('edit', false);
    if(edit){
      return {
        headerTitle: 'Edit Page',
      };
    }else{
      return {
        headerTitle: 'Normal Page',
      };
    }
 };
3
Make this world a better place

le code qui apparaît dans la partie ci-dessous est pour la version de react-navigation 2.x

vous pouvez essayer ce qui suit:

dans mon cas j'ai la configuration de navigation dans un fichier appelé app-navigator.js

const ChatStackNavigator = createStackNavigator(
    {
        People: ListPeopleScreen, // People Screen,
        Screen2: Screen2
    },
    {
        initialRouteName: 'People'
        navigationOptions: ({navigation}) => ({
            header: <AppBar title={navigation.getParam('appBar', {title: ''}).title}/>
        }),
        cardStyle: {
            backgroundColor: 'white'
        }
    }
);

Le fichier d'écran serait le suivant:

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {List, ListItem} from 'react-native-elements';

class ListPeopleScreen extends Component {

    list = [
        {
            name: 'Amy Farha',
            avatar_url: 'https://s3.amazonaws.com/uifaces/faces/Twitter/ladylexy/128.jpg',
            subtitle: 'Vice President'
        },
        {
            name: 'Chris Jackson',
            avatar_url: 'https://s3.amazonaws.com/uifaces/faces/Twitter/adhamdannaway/128.jpg',
            subtitle: 'Vice Chairman'
        }
    ];

    componentDidMount() {
        this.props.navigation.setParams({
            appBar: {
                title: 'Clientes'
            }
        });
    }

    render() {
        return <List
            containerStyle={{marginBottom: 30}}
        >
            {
                this.list.map((item) => (
                    <ListItem
                        roundAvatar
                        avatar={{uri: item.avatar_url}}
                        key={item.name}
                        title={item.name}
                    />
                ))
            }
        </List>
    };
}

export default connect(null)(ListPeopleScreen);

REMARQUE: dans mon cas, j'utilise redux et la bibliothèque de composants react-native-elements

3
Juanes30