Question

我有一个这样设置的堆栈导航器

const SavedStack = createStackNavigator<SavedParamList>();

function SavedNavigator() {
  return (
    <SavedStack.Navigator>
      <SavedStack.Screen
        name="Saved"
        component={Saved}
        options={{ headerShown: false }}
      />
      <SavedStack.Screen
        name="SavedDetails"
        component={SavedDetails}
        options={{
          headerShown: false,
        }}
      />
    </SavedStack.Navigator>
  );
}

保存的组件只是一个 FlatList 渲染使用 redux 保存的对象数组，这被渲染为顶部有一些文本的图像

<FlatList
  data={items}
  renderItem={({ item, index }) => <SavedItem item={item} index={index} />}
  keyExtractor={(item) => item.id.toString()}
  style={styles.flatList}
/>

SavedItem 组件还具有可触摸的不透明度，其 onpress 方法运行 navigation.navigate("SavedDetails", { recipe: recipe })，其中 navigation 定义为 const navigation = useNavigation();

然后 SavedDetails 组件只是展开对象并渲染图像和带有一些文本的滚动视图，就像这样

return (
    <View style={global.container}>
      <SharedElement id={`item.${recipe.id}.image`}>
        <ImageBackground source={{ uri: recipe.image }} style={styles.image}>
          <View style={styles.child}>
            <Text style={styles.title}>{recipe.title}</Text>
          </View>
        </ImageBackground>
      </SharedElement>
      <ScrollView style={{ flex: 1, paddingBottom: 5}}>
        {recipe.ingredients ? (
          <Text style={styles.subtitle}>Ingredients</Text>
        ) : (
          <Text style={styles.subtitle}>No Ingredients Available</Text>
        )}
        {recipe.ingredients &&
          recipe.ingredients.map((item, index) =>
            renderIngredients(item, index)
          )}
        {recipe.method ? (
          <Text style={styles.subtitle}>Method</Text>
        ) : (
          <Text style={styles.subtitle}>No Method Available</Text>
        )}
        {recipe.method &&
          recipe.method.map((item, index) => renderMethod(item, index))}
      </ScrollView>
    </View>
  );

问题在于，当用户按下 SavedItem 时，即触发屏幕切换到 SavedDetails 屏幕时，在页面转换和显示之前会有大约 0.5-1 秒的延迟。这是显示问题的 gif 链接 https://i.imgur.com/NYedRgc.gif

这在安卓模拟器和安卓设备上都是一样的。我该如何解决这个问题？

反应原生导航延迟

0 个答案: