避免反应本机导航器场景重叠

Question

我有一个ScrollView项目列表。当我点击一个项目时，我导航到一个新场景（从右侧滑入）。但是，在过渡期间，两个场景重叠;动画/过渡完成后它们很好。

以下是一个例子：

以及相关代码：

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>
         )
       }}
     />
    )
  }

关于如何解决这个问题的任何想法？

Answer 1

导航器在两个场景之间的过渡期间使用动画。在您的情况下，它在过渡期间使用淡入淡出。如何使用不同的动画。导航器具有Scene Transitions功能，您可以尝试更改动画。