React Native列表项按钮导航与滑动返回功能实现求助

更新说明：已替换为更精简的项目代码

我尚未找到能实现需求的解决方案，具体需求：

• 首页数据列表中，每个项的箭头按钮被点击时，跳转到颜色页面并带有向右滑动的过渡效果
• 颜色页面支持向左滑动返回首页

我查阅过实现类Snapchat滑动导航的方案，但该方案的滑动触发区域是全屏，而非列表项的导航按钮。我曾考虑用useEffect处理route.params传递的颜色数据来触发页面滑动，但不确定如何同时实现头部返回按钮和颜色页面的滑动返回功能。

App.tsx #

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import ScreenHome from '@app/screens/ScreenHome';
import ScreenColor from '@app/screens/ScreenColor';
import { frontendNavigations } from '@app/utils/HttpRequests';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName={frontendNavigations.home.route as never}
        screenOptions={{
          headerTitleAlign: 'center',
          headerStyle: { backgroundColor: '#434343'},
          headerRightContainerStyle: { paddingRight: 10 },
          headerLeftContainerStyle: { paddingLeft: 10 },
          headerTitleStyle: { color: '#ffffff'},
          headerTintColor: '#ffffff',
        }}
      >
        <Stack.Screen name={frontendNavigations.home.route as never} component={ScreenHome} options={{ title: frontendNavigations.home.screenTitle }} />
        <Stack.Screen name={frontendNavigations.color.route as never} component={ScreenColor} options={{ title: frontendNavigations.color.screenTitle }} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

screens/ScreenHome.tsx #

import React from 'react';
import { FlatList, Pressable, SafeAreaView, StyleSheet, Text, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import { MaterialIcons as Icon } from '@expo/vector-icons';
import data from '@app/data/Colors.json';
import { frontendNavigations } from '@app/utils/HttpRequests';

const Item = ({color, navigation}: any): JSX.Element => {
  return (
    <View style={{...styles.itemContainer, backgroundColor: color.background}}>
      <Text style={{color: color.text, fontWeight: '700'}}>{color.title}</Text>
      <Pressable
        style={{margin: 0, padding: 0, backgroundColor: '#ffffff'}}
        onPress={() => navigation.navigate(frontendNavigations.color.route as never, {color})}
      >
        <Icon
          style={{ alignSelf: 'center', padding: 20 }}
          name="keyboard-arrow-right"
          size={40}
          color="#67B5BD"
        />
      </Pressable>
    </View>
  );
}

export default function ScreenHome(): JSX.Element {
  const navigation = useNavigation<StackNavigationProp<any>>();
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.mainFont}>Select a Color</Text>
      <FlatList
        contentContainerStyle={{ paddingBottom: 20 }}
        style={{width: '100%'}}
        data={data}
        renderItem={({item}) => <Item color={item} navigation={navigation} />}
        keyExtractor={item => item.title}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#000000'
  },
  itemContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: '100%',
    margin: 1,
    paddingLeft: 20
  },
  mainFont: {
    fontSize: 32,
    color: '#ffffff',
    textDecorationLine: 'underline',
    fontWeight: '700'
  }
});

screens/ScreenColor.tsx #

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function ScreenColor({ route }: any): JSX.Element {
  const { color } = route.params;
  return (
    <View style={{...styles.container, backgroundColor: color.background}}>
      <Text style={{color: color.text}}>{color.title}</Text>
    </View>
  );
}

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

utils/HttpRequests.ts #

export const frontendNavigations: {[key: string]: {route: string, screenTitle: string}} = {
  home: {route: 'home', screenTitle: 'Home'},
  color: {route: 'color', screenTitle: 'Color'},
}

data/Colors.json #

[
  {
    "title": "Red",
    "text": "#ffffff",
    "background": "#ff0000"
  },
  {
    "title": "Green",
    "text": "#000000",
    "background": "#00ff00"
  },
  {
    "title": "Blue",
    "text": "#ffffff",
    "background": "#0000ff"
  },
  {
    "title": "Purple",
    "text": "#ffffff",
    "background": "#800080"
  },
  {
    "title": "Yellow",
    "text": "#000000",
    "background": "#ffff00"
  },
  {
    "title": "Cyan",
    "text": "#000000",
    "background": "#00ffff"
  },
  {
    "title": "Magenta",
    "text": "#000000",
    "background": "#ff00ff"
  },
  {
    "title": "Lime",
    "text": "#000000",
    "background": "#00ff00"
  },
  {
    "title": "Silver",
    "text": "#000000",
    "background": "#c0c0c0"
  },
  {
    "title": "Gray",
    "text": "#ffffff",
    "background": "#808080"
  },
  {
    "title": "Brown",
    "text": "#ffffff",
    "background": "#a52a2a"
  },
  {
    "title": "Dodger Blue",
    "text": "#000000",
    "background": "#1e90ff"
  },
  {
    "title": "Olive",
    "text": "#ffffff",
    "background": "#808000"
  },
  {
    "title": "Peru",
    "text": "#000000",
    "background": "#cd853f"
  }
]

欢迎任何建议。如果同时实现头部返回箭头和滑动返回过于复杂，至少实现首页列表按钮跳转加颜色页面滑动返回即可满足需求。

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