自定義react navigation跳轉動畫

自定義react navigation跳轉動畫，實作上下左右跳轉頁面。

const StackOptions = ({navigation}) => {
    const gesturesEnabled = true;
    const headerStyle= {
        height:Platform.OS==='ios'?SCALE():SCALE(),
            backgroundColor: Color.e35041,
            borderWidth:,
    };
    const headerTitleStyle = {
        fontSize: FONT(),
        color: 'white',
        alignSelf: 'center'
    };
    const headerTintColor= 'white';
    const headerLeft = (
        <TouchableOpacity activeOpacity={} onPress={()=>{navigation.goBack(null)}}>
            <View style={{paddingLeft:SCALE()}}>
                <Icon name={'md-arrow-back'} size={} color={'white'}/>
            </View>
        </TouchableOpacity>
    );
    const headerRight=(<View style={{paddingRight:SCALE()}}>
        <Icon name="md-home" size={} color={'transparent'}/>
    </View>);
    return {headerLeft,headerRight,headerStyle,gesturesEnabled,headerTitleStyle,headerTintColor,}
};

/*
* 從上至下動畫
* */
const forVerticalTop = (sceneProps)=>{
    const { layout, position, scene } = sceneProps;
    const index = scene.index;
    const height = layout.initHeight;
    const width = layout.initWidth;

    console.log('index',index);
    console.log('position',position);
    const opacity = position.interpolate({
        inputRange: ([
            index - ,
            index - ,
            index,
            index + ,
            index + ,
        ]: Array<number>),
        outputRange: ([, , , , ]: Array<number>),
    });

    const translateX = ;
    // const translateX = position.interpolate({
    //     inputRange: ([index, index+1, index + 1]: Array<number>),
    //     outputRange: ([0,width,0]: Array<number>),
    // });
    const translateY = position.interpolate({
        inputRange: ([index, index+, index + ]: Array<number>),
        outputRange: ([,height,height,]: Array<number>),
    });

    return {
        opacity,
        transform: [{ translateX }, { translateY }],
    };

};

/*
 * 從左至右動畫
 * */
const forHorizontalLeft = (sceneProps)=>{
    const { layout, position, scene } = sceneProps;

    const index = scene.index;
    const inputRange = [index - , index, index + ];

    const width = layout.initWidth;
    const outputRange = I18nManager.isRTL
        ? ([width, , -width * ]: Array<number>)
        : ([-width, , width * -]: Array<number>);

    // Add [index - 1, index - 0.99] to the interpolated opacity for screen transition.
    // This makes the screen's shadow to disappear smoothly.
    const opacity = position.interpolate({
        inputRange: ([
            index - ,
            index - ,
            index,
            index + ,
            index + ,
        ]: Array<number>),
        outputRange: ([, , , , ]: Array<number>),
    });

    const translateY = ;
    const translateX = position.interpolate({
        inputRange,
        outputRange,
    });

    return {
        opacity,
        transform: [{ translateX }, { translateY }],
    };
};

//實作定義某個頁面的動畫效果
const TransitionConfiguration = () => {
    return {
        transitionSpec: {
            duration: ,
            easing: Easing.linear(),
            timing: Animated.timing,
        },
        screenInterpolator: (sceneProps) => {
            const {scene } = sceneProps;
            const { route,index } = scene;
            const params = route.params || {};
            const transition = params.transition || 'forHorizontal';
            switch (transition){
                case 'forVerticalTop':
                    return forVerticalTop(sceneProps);
                case 'forHorizontalLeft':
                    return forHorizontalLeft(sceneProps);
                default:
                    return CardStackStyleInterpolator[transition](sceneProps);
            }
        },
    };
};

const AppNavigator = StackNavigator(
    {
        ...Routes,
        Index: {
            screen: Launch,
        },
    },
    {
        initialRouteName: 'Index',
        headerMode: 'screen',
        transitionConfig: TransitionConfiguration,
        navigationOptions: ({navigation}) => StackOptions({navigation}),
    }
);
export default () => <AppNavigator />;
           

使用方法：

this.props.navigation.navigate('Vacation', {transition: 'forVertical'});
           

效果圖：

參考:https://stackoverflow.com/questions/43974979/react-native-react-navigation-transitions/43981835#43981835