React native 避免本地导航器场景重叠

我有一个带有项目列表的

滚动视图

。单击一个项目时，我将导航到一个新场景（从右侧滑入）。然而，在过渡期间，两个场景重叠；动画/过渡完成后，它们就可以了

下面是一个例子：

以下是相关代码：

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

render（）{
返回(
{
如果（route.index==1）{
返回(
navigator.pop（）}>
其他
{route.post.title}
)
}
返回(
首页
{
this.props.posts.map（post=>(
{
如果（route.index==0）{
返回导航器。推送（路线。post（post））
}
navigator.pop（）；
}}>
))
}
)
}}
/>
)
}

---

关于如何解决这个问题有什么想法吗？

Navigator在两个场景之间的过渡期间使用动画。在您的情况下，它在过渡期间使用淡入淡出。使用不同的动画怎么样。“导航器”具有一项功能，您可以尝试更改动画。

是的，这确实是场景过渡的一个问题。我没有使用合适的设备。只是想补充一点，当你使用模拟器/仿真器时，这会变得更加明显，这比实际设备慢得多。特别是安卓的。此外，启用调试和热重新加载模式后，模拟器的运行速度会更慢。