reactjs - React 导航共享元素 5 嵌套导航器

Question

我在使用react-navigation-shared-element 5时遇到了一个小问题，所以我制作了一个非常基本的应用程序来展示一个示例。基本上，我有一个嵌套在堆栈导航器中的选项卡导航器，当导航到选项卡导航器时，我希望进行共享元素转换。这是我到目前为止所拥有的。当我在 Stack Navigator 中同时拥有 MainScreen 和 OtherScreen 时，转换正常，但是当我将 OtherScreen 移动到选项卡导航器时，它停止了。

import {NavigationContainer} from '@react-navigation/native';
import MainScreen from './src/MainScreen';
import OtherScreen from './src/OtherScreen';
import OtherScreenSecond from './src/OtherScreenSecond';
import {createSharedElementStackNavigator} from 'react-navigation-shared-element';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

const Stack = createSharedElementStackNavigator();
const Tab = createBottomTabNavigator();

const TabStuff = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="OtherScreen" component={OtherScreen} />
      <Tab.Screen name="OtherScreenSecond" component={OtherScreenSecond} />
    </Tab.Navigator>
  );
};

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator mode="modal" headerMode="none">
        <Stack.Screen name="MainScreen" component={MainScreen} />
        <Stack.Screen name="Tabs" component={TabStuff} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
import {SharedElement} from 'react-navigation-shared-element';

const MainScreen = (props) => {
  return (
    <View style={{...styles.container}}>
      <SharedElement id="test">
        <View
          style={{
            width: 100,
            height: 100,
            justifyContent: 'center',
            alignItems: 'center',
            borderRadius: 50,
            backgroundColor: 'orange',
            marginBottom: 50,
          }}></View>
      </SharedElement>
      <TouchableOpacity onPress={() => props.navigation.navigate('Tabs')}>
        <Text>Next</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'red',
  },
});

export default MainScreen;

import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
import {SharedElement} from 'react-navigation-shared-element';

const OtherScreen = (props) => {
  return (
    <View style={{...styles.container}}>
      <SharedElement id="test">
        <View
          style={{
            width: 150,
            height: 150,
            justifyContent: 'center',
            alignItems: 'center',
            borderRadius: 75,
            backgroundColor: 'blue',
            marginBottom: 50,
          }}></View>
      </SharedElement>
      <TouchableOpacity onPress={() => props.navigation.pop()}>
        <Text>Back</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'yellow',
  },
});

OtherScreen.sharedElements = (route, otherRoute, showing) => {
  return ['test'];
};

export default OtherScreen;

任何指示将不胜感激，谢谢!

Answer 1

您必须将 sharedElementsConfig 添加到 Stack。指定返回导航时要工作的共享元素 id 的屏幕

将代码更改为:

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator mode="modal" headerMode="none">
        <Stack.Screen 
          name="MainScreen" 
          sharedElementsConfig={(props) => [
            {
              id: 'test', animation: 'fade' 
            }
          ]} 
          component={MainScreen} />
        <Stack.Screen name="Tabs" component={TabStuff} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};