Éviter le chevauchement de la scène du navigateur natif de réaction

Question

J'ai un ScrollView avec une liste d'éléments. Lorsque je clique sur un élément, je navigue vers une nouvelle scène (glisser de la droite). Cependant, pendant la période de transition, les deux scènes se chevauchent; Ils vont bien après l'animation/transition.

Voici un exemple:

et Heres le code connexe:

render() { 
    return (
     <Navigator 
     initialRoute={routes.frontpage()} 
     renderScene={(route, navigator) => { 
     if(route.index === 1) { 
      return (
      <TouchableHighlight 
       onPress={() => navigator.pop()}> 
      <View style={{flex: 1}}> 
       <Text style={styles.header}> other </Text> 
       <Text> {route.post.title} </Text> 
      </View> 
      </TouchableHighlight> 
     ) 
     } 
     return (
      <View style={{flex: 1}}> 
      <Text style={styles.header}> Frontpage </Text> 
      <ScrollView> 
       { 
       this.props.posts.map(post => (
        <TouchableHighlight 
        key={post.created} 
        onPress={() => { 
         if (route.index === 0) { 
         return navigator.push(routes.post(post)) 
         } 

         navigator.pop(); 
        }}> 
        <View> 
         <PostSummary 
         title={post.title} 
         upvotes={post.ups} 
         author={post.author} 
         subreddit={post.subreddit} 
         created={post.created_utc} 
         /> 
        </View> 
        </TouchableHighlight> 
       )) 
       } 
      </ScrollView> 
      </View> 
     ) 
     }} 
    /> 
    ) 
    } 

Toutes les idées sur la façon de résoudre ce problème?

Answer 1

Navigator utilise des animations pendant les transitions entre deux scènes. Dans votre cas, il utilise fondu pendant la transition. Que diriez-vous d'utiliser une animation différente. Navigator a Scene Transitions fonctionnalité que vous pouvez essayer de changer l'animation.