2
votes

Comment recharger la page après avoir navigué à partir d'un autre écran

// J'utilise le code ci-dessous pour naviguer d'un écran vers un autre, c'est-à-dire la page d'accueil. Mais lorsque je navigue sur la page d'accueil, je dois actualiser la page ..reload. Dans le courant, quand je viens à l'écran d'accueil, la méthode du cycle de vie n'est pas appelée. Surtout le composant UserAvatar que je dois actualiser ou rappeler. Veuillez suggérer

 export default class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = { title: 'Hello!', hasFooterPermission: false };
        console.log("Valuueeeeeee");
      }

      async componentDidMount() {
        const homeFooter = await hasPermission('clm.360D.fe.restrictedView.allowed');

        this.setState({
          hasFooterPermission: homeFooter
        })
      }

      onSearchClick = () => {
        this.props.navigation.navigate('SubscriberSearch');
      };
      componentWillMount(){
        console.log(" Home page dataaaa");
      }


      render() {
        return (
          <View>
            <ImageBackground source={BG} style={{ width: '100%', height: '100%' }} resizeMode="cover">
              <View  style={{ paddingTop: 5 , alignContent:'space-between',flexDirection:'row'}}>
                <View style={{alignSelf: 'flex-start', flex:1}}>
                  <UserAvatar navigationProps={this.props.navigation} avatarSize={40} isTouchable={true}/>
                </View>
                {/* <View style={{alignSelf: 'flex-end'}}>
                  <Icon
                    name="bell-outline"
                    type="MaterialCommunityIcons"
                    style={{ color: '#FFFFFF' }}
                    onPress={() => Toastr.showToast('No new notifications!', 3000)}
                  />
                </View> */}
              </View>

// Ci-dessous la page d'accueil

    <View style={{textTransform: 'lowercase'}}><YellowBtn label="Go to 
  Dashboard"
               OnClick={this._redirectCustomerView}/></View>


        _redirectCustomerView = () => {
            this.props.navigation.navigate('UserHome');
          };

javascript reactjs react-native react-redux

0 commentaires

3 Réponses :

0
votes

Il n'est pas du devoir de la page d'accueil de savoir si vous devez actualiser la page. L'approche suggérée est que lorsque la condition de rechargement est remplie (mise à jour de l'avatar, modifications des propriétés de l'utilisateur, etc.), l'entité appelante doit aller sur la page d'accueil et si nécessaire demander un rechargement (c'est-à-dire window.location.reload ( vrai) )

0 commentaires

0
votes

Si vous ajoutez un écouteur sur la page d'accueil via l'accessoire de navigation, vous pouvez appeler une fonction lorsqu'une transition vers ou depuis la page d'accueil est sur le point de se produire ('willFocus' / 'willBlur') ou si elle s'est terminée ( 'didFocus' / 'didBlur'). Cela a fonctionné pour moi:

componentDidMount(){
  this.props.navigation.addListener('willFocus',this.load)
}
load = () => {
  //whatever you want to do when the page loads
}

Documentation ici: https : //reactnavigation.org/docs/en/navigation-prop.html

0 commentaires

3
votes

utilisez push au lieu de naviguer

this.props.navigation.push('UserHome');

0 commentaires