Question

所以我在博览会应用程序上的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：返回一个字符串。愚蠢的错误

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

1 个答案: