React Native - React 导航转换

Question

我想在我的新 React 本机应用程序中使用 React Navigation，但我找不到任何示例来说明如何在其中创建自定义视图转换。默认转换工作正常，但我希望能够在几个地方自定义它们，并且文档在这个主题上不是很有帮助。有人试过了吗？我在哪里可以看到一个有效的例子？提前致谢。

Answer 1

您可以在 this link

上找到此 post 的详细版本

我希望关于如何创建自定义过渡的步骤已经足够清楚了。

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

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
});

在您的项目中使用 App Navigator

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];
        }
    }
};

React Native - React 导航转换

React Native - React Navigation transitions

react-native

react-navigation

更新#1