React Reanimated共享元素导航过渡异常问题求助

问题概述 #

使用以下依赖栈开发的React Expo应用：

"dependencies": {
    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
    "@expo/metro-runtime": "~3.1.3",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/native-stack": "^6.9.17",
    "expo": "~50.0.6",
    "expo-status-bar": "~1.11.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.73.4",
    "react-native-reanimated": "~3.6.2",
    "react-native-web": "~0.19.6",
    "expo-image": "~1.10.6"
  },

导航栈配置及页面图片组件如下：

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Homescreen} />
        <Stack.Screen name="About" component={AboutScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

<Animated.Image source={require("./assets/adaptive-icon.png")} style={styles.image} sharedTransitionTag="tag" />

出现以下异常：

• Home → About 无共享元素过渡效果
• About → Home 时图片先移至左上角再消失，动画异常

修复步骤 #

1. 替换Animated.Image为expo-image组件 #

React Navigation的共享元素过渡仅对expo-image的Image组件提供完整支持，原生Animated.Image不兼容sharedTransitionTag属性，这是导致跳转无动画的核心原因。

修改页面中的图片组件：

import { Image } from 'expo-image';

// 替换原Animated.Image
<Image 
  source={require("./assets/adaptive-icon.png")} 
  style={styles.image} 
  sharedTransitionTag="tag" 
/>

2. 配置导航栈的共享元素规则 #

在Stack.Screen中明确指定参与过渡的共享标签，确保动画上下文正确传递：

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen 
          name="Home" 
          component={Homescreen} 
          options={{
            sharedElements: () => ['tag']
          }}
        />
        <Stack.Screen 
          name="About" 
          component={AboutScreen} 
          options={{
            sharedElements: () => ['tag']
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

注：sharedElements返回的数组需包含两个页面中一致的sharedTransitionTag值。

3. 校验Reanimated Babel配置 #

共享过渡依赖react-native-reanimated，确保babel.config.js中已添加其插件，且顺序正确：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'react-native-reanimated/plugin', // 必须放在其他插件之前
      '@babel/plugin-proposal-export-namespace-from'
    ],
  };
};

修改后必须重启Metro服务，避免缓存导致配置不生效。

4. 统一页面图片样式 #

两个页面中图片的基础样式（宽高、resizeMode等）需保持一致，样式突变会导致返回时出现偏移异常：

// 确保Home和About页面的styles.image完全一致
const styles = StyleSheet.create({
  image: {
    width: 100,
    height: 100,
    resizeMode: 'contain'
  }
});

验证 #

完成上述修改后，重启Metro并重新运行应用，即可看到正常的共享元素过渡效果：

• Home → About：图片平滑过渡到目标位置
• About → Home：图片从当前位置返回至Home页面的初始位置，无偏移消失现象

内容的提问来源于stack exchange，提问作者Geekyvinayak