React-native-navigation 共享元素转换在导航中不起作用

Question

我尝试使用文本进行最简单的共享元素转换，但它根本不起作用。文本根本不流畅地移动。我阅读了文档并按照步骤操作，但没有运气。所以到目前为止我的代码 -

App.js

import {NavigationContainer} from '@react-navigation/native';
import * as React from 'react';
import {createSharedElementStackNavigator} from 'react-navigation-shared-element';
import DetailScreen from './DetailScreen';
import ListScreen from './ListScreen';

const Stack = createSharedElementStackNavigator();
const App = ({navigation}) => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="List"
        screenOptions={{
          headerShown: false,
        }}>
        <Stack.Screen name="MainScreen" component={ListScreen} />
        <Stack.Screen
          name="DetailScreen"
          component={DetailScreen}
          options={navigation => ({
            headerBackTitleVisible: false,
            cardStyleInterpolator: ({current: {progress}}) => {
              return {
                cardStyle: {
                  opacity: progress,
                },
              };
            },
          })}
          sharedElements={route => {
            const {data} = route.params;
            console.log(data);
            return [
              {
                id: `item.${data.id}`,
                animation: 'move',
                resize: 'stretch ',
                align: 'center-top',
              },
            ];
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

ListScreen.js -

import * as React from 'react';
import {Text, TouchableOpacity, View} from 'react-native';
import {SharedElement} from 'react-native-shared-element';
const ListScreen = props => {
  const {navigation} = props;
  const persons = [
    {
      id: '1',
      name: 'Earnest Green',
    },
    {
      id: '2',
      name: 'Winston Orn',
    },
    {
      id: '3',
      name: 'Carlton Collins',
    },
    {
      id: '4',
      name: 'Malcolm Labadie',
    },
    {
      id: '5',
      name: 'Michelle Dare',
    },
  ];

  return (
    <View
      style={{
        flex: 1,
        padding: 50,
      }}>
      {persons.map(person => {
        return (
          <TouchableOpacity
            onPress={() => navigation.navigate('DetailScreen', {data: person})}>
            <SharedElement id={`item.${person.id}`}>
              <Text style={{padding: 20, fontSize: 15, marginTop: 5}}>
                {person.name}
              </Text>
            </SharedElement>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};
export default ListScreen;

还有 DetailScreen.js -

import * as React from 'react';
import {Text, View} from 'react-native';
import {SharedElement} from 'react-navigation-shared-element';

const DetailScreen = ({route}) => {
  const {data} = route.params;
  return (
    <View style={{flex: 1, justifyContent: 'flex-start', alignItems: 'center'}}>
      <SharedElement id={`item.${data.id}`}>
        <Text style={{fontSize: 22}}>{data.name}</Text>
      </SharedElement>
    </View>
  );
};
export default DetailScreen;

所以我的过渡现在看起来像

一点都不流畅。我该如何解决？

对不起我的英语不好！

Answer 1

您正在从 react-native-shared-element 导入 SharedElement。
你应该从react-navigation-shared-element导入它