typescript - stackNavigator 中的模态反应本机博览会
问题描述
所以我在一个世博会应用程序上遇到了 stacknavigator 的问题,并试图从中打开一个模式。
如果模态在应用程序的主体上,它可以正常工作,没有问题,但是当从堆栈屏幕启动模态时,大部分视图都丢失了,并且在检查时,内容在那里并且可点击,只是没有显示.
我已经添加了我的意思的屏幕截图。
两者都是同一段代码。
这就是我将模态添加到堆栈的方式
return (
<Stack.Navigator
screenOptions={headerOptions}
headerMode="screen"
initialRouteName={'Home'}
>
<Stack.Screen
name="Home"
component={TabNavigator}
options={({ navigation, route }) => {
let tabScene = getTabSceneName(route);
return {
headerTitle:
<View>
<TouchableOpacity
onPress={() => setSearchModalVisible(true)}
activeOpacity={1}
>
<View style={styles.searchInputContainer}>
<SearchInput
pointerEvents="none"
placeholder={t('Search')}
editable={false}
/>
</View>
</TouchableOpacity>
<SearchModal
onItemPress={(product: Product) => {
navigation.navigate('ProductDetails', { productHandle: product.handle });
}}
onSubmit={(searchKeyword: string) =>
navigation.navigate('SearchResults', {
searchKeyword,
})
}
isVisible={isSearchModalVisible}
setVisible={setSearchModalVisible}
/>
</View>,
headerRight: () => (
<HeaderIconButton
icon="cart"
onPress={() => navigation.navigate('ShoppingCart')}
/>
),
headerStyle: {
shadowColor: COLORS.transparent,
elevation: 10,
},
};
}
}}
/>
<Stack.Screen
name="Auth"
component={AuthScene}
options={() => ({
title: t('Welcome'),
})}
/>
<Stack.Screen
name="ForgotPassword"
component={ForgotPasswordScene}
options={() => ({
title: t('Forgot Password'),
})}
/>
</Stack.Navigator>
);
}
我附上了它的含义和问题的屏幕截图。
解决方案
想通了...看起来我正在使用 headerTitle: 返回一个字符串。愚蠢的错误
推荐阅读
- python - Python数据帧矢量化for循环
- docker - Docker 容器 Evee 渲染中的 Blender 背景
- python - 如何在忽略空值的列中获取每个组的计数
- amazon-web-services - CloudFormation cfn-init 在 Ubuntu 基础上中断 AWS::EC2::LaunchTemplate
- ssl - javafx 应用程序映像中 jgit 的 ssl 证书问题与 javafx 应用程序运行时
- r - 使用新 R 版本更新旧 R 版本中的包
- neo4j - Neo4j 和 Cypher:只反转一个箭头
- exception - 关于哪个 OCaml 标准库函数可以引发哪个错误的文档
- python - FreeOPC 不会在启动时启动
- ios - swift - 使用 Decodable 从 API 解析 JSON