OnLayout pas appelé

Question

Ceci est un extrait de mon code:

render() { 
    console.log("first log"); 
    return (
     <View onLayout={e => console.log("second log")}> 
... 

La console affiche « d'abord vous connecter », mais pas le second. La vue semble s'afficher correctement. J'ai essayé avec d'autres vues mais le résultat est le même. J'utilise reac-native 0.48.4.

Answer 1

Juste mis à jour pour réagir-native 0.48.4 et je ne suis pas capable de reproduire l'erreur sur iOS ou Android. Cependant, puisque vous n'utilisez pas votre « e », vous devriez peut-être changer le code pour

<View onLayout={() => console.log('second log')}> 

ou même

<View onLayout={console.log("second log")}> 

Answer 2

Je résolu ce problème en changeant la hauteur initiale supérieure à 0, puis avec succès la fonction OnLayout déclenché lorsque la disposition de ChildView a été modifiée.

constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     title: '', 
 
     height: 0 // changed to 1 
 
    }; 
 
    } 
 
    onLayout = (event) => { 
 
    console.log('on layout:') 
 
    const { 
 
     x, 
 
     y, 
 
     width, 
 
     height 
 
    } = event.nativeEvent.layout; 
 
    console.log(x, y, width, height); 
 
    } 
 
    render() { 
 
    return (
 
     <View style={[styles.container, {height: this.state.height}]}> 
 
     <View onLayout={this.onLayout}> 
 
      <ChildView/> 
 
     </View> 
 
     </View> 
 
    ) 
 
    }

En raison de ce changement de rupture: Android: appeler uniquement OnLayout lorsque la mise en page a réellement changé https://github.com/facebook/react-native/wiki/Breaking-Changes#android-only-call-onlayout-when-layout-has-actually-changed-15429e---astreet