React Native - 反应导航转换 [英] React Native - React Navigation transitions

问题描述

我想在我的新 React Native 应用程序中使用 React Navigation 但我找不到任何显示的示例如何在那里创建自定义视图转换.默认过渡效果很好，但我希望能够在少数几个地方自定义它们，而且文档对这个主题没有太大帮助.有人试过了吗?我在哪里可以看到一个有效的例子?提前致谢.

I'd like to use React Navigation in my new react native app but I can't find any example showing how to create custom view transitions in there. Default transitions are working fine but I'd like to be able to customize them in few places and the docs don't come very helpfull in this subject. Anyone tried that already? Anywhere I could see a working example? Thanks in advance.

推荐答案

你可以在 此链接

我希望这对如何创建自定义过渡的分步说明足够清楚.

I hope this is clear enough with step-by-step for how to create custom transition.

创建一两个场景进行导航

Create a Scene or Two to navigate

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 创建应用导航器

Create app navigator using Stack Navigator

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

在您的项目中使用 App Navigator

Use App Navigator in your project

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

在 eq. 中注册您的应用.index.ios.js

Register your app in eq. index.ios.js

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

更新 #1

至于如何设置每个场景的过渡的问题，我就是这样做的.

Update #1

As for the question on how to set transition per scene, this is how I'm doing it.

当您使用 react-navigation 中的 NavigationActions 导航时，您可以传递一些道具.就我而言，它看起来像这样

When you navigate using NavigationActions from react-navigation, you can pass through some props. In my case it looks like this

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

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

and then inside the Configurator you can switch between these transition like this

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 - 反应导航转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！