反应本机导航自定义动画过渡 [英] 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/db0c928673aec0fba7b4c8d1c456efbb6

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屋！