android - 反应原生导航延迟
问题描述
我有一个像这样设置的堆栈导航器
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
ie 触发换SavedDetails
屏时,页面跳转到显示前会有大约 0.5-1s 的延迟。这是显示问题的 gif 链接https://i.imgur.com/NYedRgc.gif
这在 android 模拟器和 android 设备上都是一样的。我怎样才能解决这个问题?
解决方案
推荐阅读
- java - 如何知道具有相同源端点和目标端点的 Apache Camel 组件的执行流程?
- sql - 排序主子
- c++ - 如何找到具有边界点的所有对象的最短边界到边界距离?
- python - 如何使用 vtk 在一行中选择点?
- python - 对数尺度的直方图和核密度
- android - 如何保存和恢复 android WebView 的 WebBackForwardList?
- javascript - 慢时如何在本机反应中加快联系人处理速度?
- c - 下面的链表代码给出了有趣的错误,你能检查一下吗?
- sonarqube - SonarQube 无法启动本地主机
- angular - Typescript 中的类型委托