自定义react navigation跳转动画

最新推荐文章于 2024-05-14 09:52:20 发布

WYQ_XQ

最新推荐文章于 2024-05-14 09:52:20 发布

阅读量2.3k

点赞数

分类专栏： react-native 工作中遇到的问题 react navigation 文章标签： react-native navigation animation navigate

本文链接：https://blog.csdn.net/u014041033/article/details/77679700

版权

本文介绍如何在React Native中实现自定义的react navigation页面跳转动画，包括上下左右的各种动画效果。通过实例展示了具体的操作步骤，并提供了一张效果图。参考来源为Stack Overflow的相关问题解答。

摘要由CSDN通过智能技术生成

自定义react navigation跳转动画，实现上下左右跳转页面。

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