反应原生导航自定义动画过渡

Question

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

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

Answer 1

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

然后,在你的StackNavigator,添加该配置,如下所示:

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

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

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