如何使用react-navigation-shared-element：从安装到实现的快速入门教程

【免费下载链接】react-navigation-shared-element React Navigation bindings for react-native-shared-element 💫 项目地址: https://gitcode.com/gh_mirrors/re/react-navigation-shared-element

react-navigation-shared-element是一个为React Navigation提供共享元素过渡效果的库，它能够帮助开发者轻松实现页面间的元素平滑过渡动画，提升React Native应用的用户体验。本文将从安装到实现，为你提供一个快速入门教程。

什么是react-navigation-shared-element

react-navigation-shared-element是react-native-shared-element与React Navigation的绑定库，它允许你在不同的屏幕之间创建流畅的共享元素过渡动画。这种过渡效果可以让应用界面更加生动，增强用户体验。

兼容性说明

react-navigation-shared-element支持多个React Navigation版本，具体如下：

版本	React-Navigation	说明
3.x	4, 5 & 6	从react-navigation-shared-element/build/v4导入可用于4.x版本
2.x	3 & 4	兼容react-navigation-stack@2
1.x	3 & 4	兼容react-navigation-stack@1

安装步骤

1. 安装依赖

首先，你需要安装react-navigation-shared-element及其依赖：

npm install react-navigation-shared-element react-native-shared-element
# 或者
yarn add react-navigation-shared-element react-native-shared-element

2. 链接原生依赖

对于iOS，需要安装CocoaPods依赖：

cd ios && pod install && cd ..

对于Android，通常不需要额外操作，因为React Native 0.60+支持自动链接。

基本使用方法

1. 创建共享元素导航器

首先，你需要创建一个共享元素导航器：

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

const Stack = createSharedElementStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="List" component={ListScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

2. 在列表屏幕中定义共享元素

在列表屏幕中，你需要为要共享的元素添加sharedElementTag属性：

function ListScreen({ navigation }) {
  return (
    <FlatList
      data={items}
      renderItem={({ item }) => (
        <TouchableOpacity onPress={() => navigation.navigate('Detail', { item })}>
          <SharedElement id={`item.${item.id}.photo`}>
            <Image source={{ uri: item.photo }} style={styles.photo} />
          </SharedElement>
          <Text>{item.title}</Text>
        </TouchableOpacity>
      )}
    />
  );
}

3. 在详情屏幕中定义共享元素

在详情屏幕中，你需要为对应的元素添加相同的sharedElementTag属性：

function DetailScreen({ route }) {
  const { item } = route.params;
  
  return (
    <View>
      <SharedElement id={`item.${item.id}.photo`}>
        <Image source={{ uri: item.photo }} style={styles.largePhoto} />
      </SharedElement>
      <Text style={styles.title}>{item.title}</Text>
      <Text style={styles.description}>{item.description}</Text>
    </View>
  );
}

4. 配置共享元素过渡

你可以在导航器中配置共享元素过渡的动画效果：

<Stack.Screen
  name="Detail"
  component={DetailScreen}
  options={{
    sharedElements: (route, otherRoute, showing) => {
      const { item } = route.params;
      return [`item.${item.id}.photo`];
    },
  }}
/>

示例应用

项目中提供了一个完整的示例应用，你可以通过以下步骤运行：

1. 克隆仓库：

git clone https://gitcode.com/gh_mirrors/re/react-navigation-shared-element

2. 进入示例目录：

cd react-navigation-shared-element/example

3. 安装依赖：

npm install
# 或者
yarn install

4. 运行应用：

# iOS
npx react-native run-ios

# Android
npx react-native run-android

示例应用展示了多种共享元素过渡效果，包括列表到详情页的图片过渡等。

文档和资源

• API文档：详细介绍了react-navigation-shared-element的API
• 迁移指南：帮助你从旧版本迁移到新版本
• React Navigation 4 API：针对React Navigation 4的使用指南

注意事项

• react-navigation-shared-element使用基于JS的Stack Navigator，目前不支持Native Stack Navigator
• React Navigation 6的Group组件暂不支持
• 在Android上，detachInactiveScreens默认设置为false，以避免过渡时的闪烁问题

通过本教程，你应该已经了解了如何使用react-navigation-shared-element来实现共享元素过渡效果。现在，你可以在自己的React Native项目中尝试使用这个库，为用户提供更加流畅和吸引人的界面过渡体验。

【免费下载链接】react-navigation-shared-element React Navigation bindings for react-native-shared-element 💫 项目地址: https://gitcode.com/gh_mirrors/re/react-navigation-shared-element