使用useNativeDriver的React导航过渡动画仅在第一次运行

时间:2017-12-18 12:36:29

标签: animation react-native react-navigation

我正在使用react-navigation Transitioner来创建自定义StackNavigator。在转换配置中使用useNativeDriver: true时,转换动画仅在第一次运行时运行。设置为false时,它按预期工作。

  

注意:虽然将其设置为false确实解决了我的问题,但即使在生产模式下,我也会在没有它的情况下在Android上获得不稳定的性能。

以下代码段是我的导航视图

render() {
    return (
        <Transitioner
            configureTransition={this._configureTransition}
            navigation={this.props.navigation}
            render={this._render}
        />
    );
}

_configureTransition = () => {
    return { useNativeDriver: true };
}

_render = (transitionProps) => {
    return transitionProps.scenes.map(scene => this._renderScene(transitionProps, scene));
}

_renderScene = (transitionProps, scene) => {
    const { layout, position } = transitionProps;
    const { index } = scene;

    const translateX = position.interpolate({
        inputRange: [index - 1, index, index + 1],
        outputRange: [layout.initWidth, 0, 0],
    });

    const animationStyle = {
        position: 'absolute',
        width: '100%',
        height: '100%',
        backgroundColor: '#FFF',
        transform: [{ translateX }],
    };

    const Scene = this.props.router.getComponentForRouteName(scene.route.routeName);

    return (
        <Animated.View key={scene.key} style={animationStyle}>
            <Scene />
        </Animated.View>
    );
}

以下是问题的屏幕截图。请注意第一个过渡是如何动画的,而未来的过渡不是(“后退”导航也应该是动画的)

Screen cap of issue from iOS simulator

0 个答案:

没有答案