React Native - React Navigation转场动画

Question

我想在我的新React Native应用程序中使用React Navigation，但是我找不到任何示例显示如何在其中创建自定义视图转换。默认的过渡效果很好，但我希望能够在某些地方对它们进行自定义，而文档在这个主题上并没有提供很大的帮助。

有人已经尝试过吗？有没有地方可以看到一个工作的示例？

先谢谢了。

- Rocky Balboa

Answer 1

你可以在此链接上找到本文的详细版本。

希望这里提供了逐步创建自定义转场动画的清晰方法。

创建一个或两个场景以进行导航。

class SceneOne extends Component {
    render() {
        return (
            <View>
                <Text>{'Scene One'}</Text>
            </View>
        )
    }
}
class SceneTwo extends Component {
    render() {
        return (
            <View>
                <Text>{'Scene Two'}</Text>
            </View>
        )
    }
}

声明您的应用程序场景

let AppScenes = {
    SceneOne: {
        screen: SceneOne
    },
    SceneTwo: {
        screen: SceneTwo
    },
}

声明自定义转换

let MyTransition = (index, position) => {
    const inputRange = [index - 1, index, index + 1];
    const opacity = position.interpolate({
        inputRange,
        outputRange: [.8, 1, 1],
    });

    const scaleY = position.interpolate({
        inputRange,
        outputRange: ([0.8, 1, 1]),
    });

    return {
        opacity,
        transform: [
            {scaleY}
        ]
    };
};

声明自定义转换配置器

let TransitionConfiguration = () => {
    return {
        // Define scene interpolation, eq. custom transition
        screenInterpolator: (sceneProps) => {

            const {position, scene} = sceneProps;
            const {index} = scene;

            return MyTransition(index, position);
        }
    }
};

使用 Stack Navigator 创建应用程序导航

const AppNavigator = StackNavigator(AppScenes, {
    transitionConfig: TransitionConfiguration
});

在您的项目中使用应用程序导航器

class App extends Component {
    return (
        <View>
            <AppNavigator />
        </View>
    )
}

在eq中注册你的应用程序。index.ios.js

import { AppRegistry } from 'react-native';
AppRegistry.registerComponent('MyApp', () => App);

更新 #1

关于如何为每个场景设置过渡效果，这是我的做法。

当您使用react-navigation中的NavigationActions进行导航时，您可以传递一些属性。在我的情况下，它看起来像这样：

this.props.navigate({
    routeName: 'SceneTwo',
    params: {
        transition: 'myCustomTransition'
    }
})

然后在配置器内，您可以像这样在这些转换之间切换

let TransitionConfiguration = () => {
    return {
        // Define scene interpolation, eq. custom transition
        screenInterpolator: (sceneProps) => {

            const {position, scene} = sceneProps;
            const {index, route} = scene
            const params = route.params || {}; // <- That's new
            const transition = params.transition || 'default'; // <- That's new

            return {
                myCustomTransition: MyCustomTransition(index, position),
                default: MyTransition(index, position),
            }[transition];
        }
    }
};

- Tim Rijavec

---

这相当令人印象深刻。一切都很完美地运作着。 非常感谢您提供如此详尽的答案。只有一处小小的笔误在您的代码中，所以这行代码： const { position } = sceneProps;应该改为： const { position, scene } = sceneProps;再次感谢。 - Rocky Balboa

@TimRijavec 你有没有想法，我怎么可以为单独的屏幕更改过渡效果？ - Sagar Khatri

@JulianK 你可以通过MyTransition中的三向插值来配置后退动画。你可以看到我正在使用一个由3个索引 [index - 1, index, index + 1] 组成的数组，其中index表示当前页面索引，并在前一页和后一页索引之间进行插值。 - Tim Rijavec

@TimRijavec 我已经完成了。我认为可能有更好的方法可以解决这个问题。无论如何，非常感谢你提供如此出色的解决方案，Tim。 - shet_tayyy

@TimRijavec 你有没有想过在使用不同屏幕的转换时如何传递transitionSpec？ - Nathan