避免 react-native 导航器场景重叠

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

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