1

我正在开发一个 react native 应用程序并使用 React router native v4，并且我正在尝试开发动画部分，正如文档所建议的那样，首先我确保一切都可以在没有动画或过渡的情况下工作。

我已经迭代了实现，这就是我现在所得到的：

我的主要组件呈现以下内容：

// app.js:render
<ConnectedRouter history={history}>
  <App />
</ConnectedRouter>

我的 routes.js 呈现以下内容（注意传递给 Switch 的 location 属性，以防止它在父组件之前更新其子组件）：

// routes.js render
<ViewTransition pathname={location.pathname}>
  <Switch location={location}>
    <Route exact path={uri.views.main} component={Dashboard} />
    <Route path={uri.views.login} component={Login} />
    <Route path={uri.views.register} component={Register} />
  </Switch>
</ViewTransition>

以及处理动画的 ViewTransition，现在它只是淡入/淡出旧视图和新视图：

// view-transition.js
@withRouter
export default class ViewTransition extends Component {
  static propTypes = {
    children: PropTypes.node,
    location: PropTypes.object.isRequired,
  };

  state = {
    prevChildren: null,
    opacity: new Animated.Value(1)
  };

  componentWillUpdate(nextProps) {
    if (nextProps.location !== this.props.location) {
      this.setState({ prevChildren: this.props.children }, this.animateFadeIn);
    }
  }

  animateFadeIn = () => {
    Animated.timing(this.state.opacity, {
      toValue: 0,
      duration: 150
    }).start(this.animateFadeOut);
  };

  animateFadeOut = () => {
    this.setState({ prevChildren: null }, () => {
      Animated.timing(this.state.opacity, {
        toValue: 1,
        duration: 400
      }).start();
    });
  };

  render() {
    const { children } = this.props;
    const { prevChildren, opacity } = this.state;
    return (
      <Animated.View
        style={{
          ...StyleSheet.absoluteFillObject,
          opacity,
          position: "absolute"
        }}
      >
        {prevChildren || children}
      </Animated.View>
    );
  }
}

上面的代码正在工作，我可以看到旧视图淡出和新视图淡入，但是我有一个问题，当它开始淡出时，组件以某种方式重新安装，我希望在动画开始之前看到闪烁，我希望知道我的代码有什么问题。

4

3 回答 3

1

我可以修复上面的代码，碰巧在 react 组件的生命周期中的方法 componentWillUpdate 已经将 nextProps 传递给了子组件，同时我的组件使用旧子组件设置了新状态，Switch 正在准备渲染新的，这会产生 oldChildren 的卸载和新孩子的安装，当我的组件最终完成设置状态时，旧的孩子已经被卸载，他们必须再次安装。

上面的故事是“我的动画开始时我可以看到眨眼”的长篇故事，解决方案碰巧很简单，我不再检查东西，componentWillUpdate而是检查componentWillReceiveProps，因为新的道具会在它之前传递给父组件孩子，它给了我足够的时间来捕捉当前的孩子，将它们分配给状态，在 Switch 卸载它们之前渲染并将它们保留在视图中以淡出，所以不再闪烁。

我的最终视图-transition.js：

// view-transition.js
export default class ViewTransition extends Component {
  static propTypes = {
    children: PropTypes.node,
    location: PropTypes.object.isRequired,
  };

  state = {
    prevChildren: null,
    opacity: new Animated.Value(1)
  };

  componentWillReceiveProps(nextProps) {
    if (nextProps.location !== this.props.location) {
      this.setState({ prevChildren: this.props.children }, this.animateFadeIn);
    }
  }

  animateFadeIn = () => {
    Animated.timing(this.state.opacity, {
      toValue: 0,
      duration: 150
    }).start(this.animateFadeOut);
  };

  animateFadeOut = () => {
    this.setState({ prevChildren: null }, () => {
      Animated.timing(this.state.opacity, {
        toValue: 1,
        duration: 400
      }).start();
    });
  };

  render() {
    const { children } = this.props;
    const { prevChildren, opacity } = this.state;
    return (
      <Animated.View
        style={{
          ...StyleSheet.absoluteFillObject,
          opacity,
          position: "absolute"
        }}
      >
        {prevChildren || children}
      </Animated.View>
    );
  }
}
于 2018-03-02T22:06:59.823 回答
0

我编写了一个 AnimatedSwitch 组件来在 React Native 中工作。

有一个短暂的时刻，状态正在更新并且它会闪烁，但我用这段代码修复了这个问题：

  // Need to render the previous route for the time between not animating and animating
  if (needsAnimation && !animating) {
    const tempPreviousRoute = getPreviousRoute(
      exact,
      previousLocation,
      previousChildren,
    );

    if (tempPreviousRoute) {
      const prevRouteComp = renderPreviousRoute(tempPreviousRoute);
      return prevRouteComp;
    } else {
      return null;
    }
  }

完整的代码在这里。

https://javascriptrambling.blogspot.com/2020/07/react-router-native-animatedswitch.html

于 2020-08-20T23:00:26.690 回答
-1

嗯..我知道有点太晚了，也许你可以试试react-router-native-animate-stack

它是 的子组件react-router-native。但它是可动画的并提供堆栈功能。它的灵感来自switch组件，如果你知道switch，你就会知道如何使用这个包。

默认行为

定制

于 2020-03-26T03:15:24.817 回答