stackNavigator 中的模态反应本机博览会

Question

所以我在 expo 应用程序上遇到了 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>
);
}

我附上了它的含义和问题的屏幕截图。

Screenshot of missing view, when it's launched from the stack screen

Screenshot of how it's meant to look like

Answer 1

想通了......看起来我正在使用 headerTitle: 到 return 一个字符串。愚蠢的错误

stackNavigator 中的模态反应本机博览会

Modal in stackNavigator react native expo

typescript

react-native

expo

stack-navigator