Question

我正在使用导航器组件我有飞溅场景，1秒后下一个场景正在显示我需要在启动结束后重置导航堆栈当我使用resetTo方法时，场景之间的过渡无动画我该怎么做动画？

Answer 1

您可以使用onDidFocus道具对某些代码进行解决，并将对象传递给navigator.push()以使用navigator.immediatelyResetRouteStack进行处理，如下所示：

renderScene(route, navigator) {
    switch (route.name) {
      case 'Home':
        return (<Home navigator={navigator} {...route.props} />);
      case 'User':
        return (<User navigator={navigator} {...route.props} />);
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <Navigator
          ref='navigator'
          initialRoute={{ name: 'Home' }}
          renderScene={this.renderScene}
          onDidFocus={(route) => {
            if (route.reset) {
              this.refs.navigator.immediatelyResetRouteStack([{ name: route.name }])
            }
          }}
          />
      </View>
    );
  }

要执行 magic ，您可以像这样调用navigator.push：

navigator.push({ name: 'Home', reset: true })

它将动画到Home并为您重置堆栈;）

Answer 2

尝试使用 popToTop（）而不是 resetTo（route）。这应该在任何屏幕上进行动画。

以下是所有导航方法的列表： https://facebook.github.io/react-native/docs/navigator.html#content

Answer 3

对于任何人看到这个帖子都不要使用setTimeout！这真的很难看，绝对不可维护也不可扩展。已经内置了一些内容。

您可以使用onDidFocus，它完美无缺！

http://facebook.github.io/react-native/releases/0.25/docs/navigator.html#ondidfocus

navigatorDidFocusHandler = route => {
  // call immediatelyResetRouteStack here
};

但请注意，重置路由堆栈会触发render。所以一定要正确处理。

Answer 4

我有同样的问题，截至目前没有直接的方法来做到这一点，所以在合并之前，我使用以下作为解决方法。

首先推送，然后使用setTimeout

调用 immediateResetRouteStack

void opengl_draw(int width, int height, void const * surf_data)
{
    static GLuint texture_id = 0;
    static int tex_width = 0;
    static int tex_height = 0;

    if (!surf_data)
    {
        printf("draw_func() - No valid pointer to surface-data passed\n");
        return;
    }

    if( !texture_id ) {
        glGenTextures(1, &texture_id);
    }
    glBindTexture(GL_TEXTURE_RECTANGLE_ARB, texture_id);
    if( width != tex_width || height != tex_height ) {
        glTexImage2D(GL_TEXTURE_RECTANGLE_ARB,
            0,
            GL_RGBA,
            tex_width = width,
            tex_height = height,
            0,
            GL_BGRA,
            GL_UNSIGNED_BYTE,
            surf_data);
    } else {
        glTexSubImage2D(GL_TEXTURE_RECTANGLE_ARB,
            0, 0, 0,
            tex_width, tex_height,
            GL_BGRA,
            GL_UNSIGNED_BYTE,
            surf_data);
    }

    glViewport(0, 0, width, height);

    glMatrixMode(GL_PROJECTION);
    glPushMatrix();
    glLoadIdentity();
    glOrtho(0.0f, 1.0f, 0.0f, 1.0f, -1.0f, 1.0f);

    glMatrixMode(GL_MODELVIEW);
    glLoadIdentity();
    glPushMatrix();

    glColor3f(0.25f, 0.5f, 1.0f);
    glBegin(GL_QUADS);
    glTexCoord2f(0.0f, 0.0f);
    glVertex2f(0.0f, 0.0f);
    glTexCoord2f((GLfloat)width, 0.0f);
    glVertex2f(1.0f, 0.0f);
    glTexCoord2f((GLfloat)width, (GLfloat)height);
    glVertex2f(1.0f, 1.0f);
    glTexCoord2f(0.0f, (GLfloat)height);
    glVertex2f(0.0f, 1.0f);
    glEnd();

    glMatrixMode(GL_PROJECTION);
    glPopMatrix();
    glMatrixMode(GL_MODELVIEW);
    glPopMatrix();
}

Answer 5

我遇到了immediatelyResetRouteStack()正在卸载我的 EventIndex 组件并重新安装它的新实例的问题。

这导致了问题，因为 EventIndex 在setState()中进行了componentDidMount()调用。基本上， EventIndex 的前一个实例在卸载（或类似的东西）后自己调用了setState()。

因此，如果您想避免此问题，可以将路由本身作为参数传递给immediatelyResetRouteStack，而不是仅传递路由名称。

而不是navigator.immediatelyResetRouteStack([{ name: route.name }])

你可以像这样navigator.immediatelyResetRouteStack([ route ])

传递路线

这样，下一个场景将不会在导航过程中卸载并重新安装为新实例。

反应原生 - 当“resetTo”路线时，没有动画

5 个答案: