React Navigation Shared Element 使用教程

React Navigation Shared Element 使用教程

react-navigation-shared-elementReact Navigation bindings for react-native-shared-element 💫项目地址:https://gitcode.com/gh_mirrors/re/react-navigation-shared-element

项目介绍

react-navigation-shared-element 是一个为 react-native-shared-element 提供 React Navigation 绑定库的项目。它允许在 React Native 应用中实现共享元素过渡效果，类似于 Snapchat 和 Airbnb 中的动画效果。该项目支持 React Navigation 5 和 6 版本，并且兼容 React Navigation 4 和 3 版本。

项目快速启动

安装依赖

首先，确保你已经安装了 react-navigation 和 react-native-shared-element：

npm install @react-navigation/native react-native-shared-element

然后安装 react-navigation-shared-element：

npm install react-navigation-shared-element

配置导航

在你的导航配置中引入并使用 SharedElement 组件：

import { createSharedElementStackNavigator } from 'react-navigation-shared-element';

const Stack = createSharedElementStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen
          name="Detail"
          component={DetailScreen}
          options={() => ({
            headerBackTitleVisible: false,
            cardStyleInterpolator: ({ current: { progress } }) => {
              return {
                cardStyle: {
                  opacity: progress,
                },
              };
            },
          })}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

使用 SharedElement

在组件中使用 SharedElement 组件来标记共享元素：

import { SharedElement } from 'react-navigation-shared-element';

function HomeScreen({ navigation }) {
  return (
    <View>
      <SharedElement id="item">
        <Image source={{ uri: 'https://example.com/image.jpg' }} style={{ width: 100, height: 100 }} />
      </SharedElement>
      <Button title="Go to Detail" onPress={() => navigation.navigate('Detail')} />
    </View>
  );
}

function DetailScreen() {
  return (
    <View>
      <SharedElement id="item">
        <Image source={{ uri: 'https://example.com/image.jpg' }} style={{ width: 300, height: 300 }} />
      </SharedElement>
    </View>
  );
}

应用案例和最佳实践

应用案例

1. Snapchat 风格的共享元素过渡：在图片浏览应用中，点击图片后，图片可以平滑地过渡到全屏查看模式。
2. Airbnb 风格的共享元素过渡：在房源列表中，点击房源卡片后，房源图片和信息可以平滑地过渡到详情页面。

最佳实践

1. 确保元素唯一性：使用 id 属性确保共享元素的唯一性，避免冲突。
2. 优化性能：在复杂的过渡效果中，注意性能优化，避免过度渲染。
3. 兼容性：确保你的 React Navigation 版本与 react-navigation-shared-element 兼容。

典型生态项目

1. react-native-shared-element：核心库，提供共享元素过渡的基础功能。
2. react-navigation：React Native 的导航库，与 react-navigation-shared-element 紧密集成。
3. react-native-reanimated：用于创建更复杂的动画效果，可以与 react-navigation-shared-element 结合使用。

通过以上步骤，你可以快速上手并使用 react-navigation-shared-element 实现令人印象深刻的共享元素过渡效果。

react-navigation-shared-elementReact Navigation bindings for react-native-shared-element 💫项目地址:https://gitcode.com/gh_mirrors/re/react-navigation-shared-element