反应原生导航自定义动画过渡 [英] react native navigation custom animated transition

问题描述

我正在使用 react native v0.49，并且我正在尝试在导航到其他页面时实现自定义转换.我要做的是只为从场景 2 到场景 3 的一个场景进行过渡.但不适用于所有应用程序.这个例子我发现它适用于所有网络，所以我只想为一个屏幕和所有应用程序制作，因为如果我这样做，它将影响所有应用程序，这不是我想要的.有什么想法吗?

I'm using react native v0.49 and I'm trying to implement custom transition when navigate to other page. what I'm trying to do is to make transition only for one scene from scene 2 to scene3. but not for all the app. this example I found it's for all web so I want to make just for one screen and for all the app because if I do that way it will effect for all the app and it's not what I'm looking for. any idea?

    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
    },


SceneThree: {
            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);
        }
    }
};

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

推荐答案

这是我们如何做到这一点的示例，您可以添加自己的过渡以使其成为您自己的.我们的目标只是公开内置的过渡配置，以便更好地控制动画.我们的过渡配置:https://gist.github.com/jasongaare/db0c928673aec0fba7b4c8d1c456efb6

Here's an example of how we do it, you can add your own transitions to make it your own. Our goal was simply to expose the baked-in transition configurations to have more control over the animations. Our transition configuration: https://gist.github.com/jasongaare/db0c928673aec0fba7b4c8d1c456efb6

然后，在您的 StackNavigator 中，像这样添加该配置:

Then, in your StackNavigator, add that config like so:

StackNavigator(
  {
    LoginScreen: { screen: LoginScreen },
    HomeScreen: { screen: HomeScreen },
  },
  {
    stateName: 'MainStack',
    initialRouteName: 'HomeScreen',
    initialRouteParams: { transition: 'fade' },
    transitionConfig: TransitionConfig,
   }
);

最后，当您导航时，只需在导航时添加您的参数:

Finally, when you navigate, just add your params when you navigate:

this.props.navigation.navigate('HomeScreen', { transition: 'vertical' })

这篇关于反应原生导航自定义动画过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！