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

【问题标题】：Modal in stackNavigator react native expostackNavigator 中的模态反应本机博览会
【发布时间】：2020-07-06 23:21:33
【问题描述】：

所以我在一个 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

【问题讨论】：

标签： typescript react-native expo stack-navigator

【解决方案1】：

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

【讨论】：