避免 react-native navigator 场景重叠

Question

我有一个 ScrollView 和一个项目列表。当我单击一个项目时，我导航到一个新场景（从右侧滑入）。但是，在过渡期间，这两个场景重叠； animation/transition 完成后他们就没事了。

这是一个例子：

这里是相关代码：

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

避免 react-native navigator 场景重叠

Avoid react-native navigator scene overlapping

navigator

scene

react-native

react-native-android