当在Expo Go应用程序中运行Android上的React Native应用程序时，我最近注意到我的视图被隐藏在顶部导航栏后面。以前不是这样的。在iOS上，视图被呈现在顶部导航栏下面-正如预期的那样-但在Android上却没有。我似乎无法弄清楚这里发生了什么。我将在下面分享屏幕的代码。有关此问题的示例，请参见屏幕截图。

版本信息

"expo": "~47.0.11",
"react-native": "0.70.8",
"@react-navigation/bottom-tabs": "^6.5.7",
"@react-navigation/native": "^6.1.6",
"@react-navigation/native-stack": "^6.9.12",
"@react-navigation/stack": "^6.3.16",

SearchStackScreen.jsx

const SearchStack = createNativeStackNavigator();

function SearchStackScreen() {
  Bugsnag.setContext('SearchStackScreen');

  const languageStore = useSelector(selectLanguageStore);
  const isDarkTheme = useTheme().dark;

  return (
    <SearchStack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: isDarkTheme ? colors.dark : colors.off_white
        }
      }}
    >
      <SearchStack.Screen
        name={TabBarStackScreenNames.search}
        component={SearchScreen}
        options={{
          headerLeft: () => <DefaultHeaderLeft />,
          headerShadowVisible: false,
          title: ''
        }}
      />
      <SearchStack.Screen
        name={MainStackScreenNames.search_profile}
        component={ProfileScreen}
        options={({ route }) => ({
          headerBackTitle: languageStore.back,
          headerRight: () => (
            <ProfileHeaderRight
              user={route.params.user}
              currentUser={route.params.currentUser}
              isCurrentUsersProfile={route.params.isCurrentUsersProfile}
            />
          ),
          title: route.params.title
        })}
      />
    </SearchStack.Navigator>
  );
}

SearchScreen.jsx

function SearchScreen({ navigation }) {
  const styles = StyleSheet.create({
    main: {
      flex: 1
    },
    no_users_text: {
      flex: 1,
      paddingVertical: sizes.sm,
      textAlign: 'center'
    },
    placeholder_container: {
      flex: 1,
      paddingHorizontal: sizes.md,
      paddingVertical: sizes.sm
    },
    results_container: {
      flex: 1
    },
    search_bar: {
      backgroundColor: isDarkTheme ? colors.dark : colors.off_white,
      borderRadius: 0
    },
    search_gif: {
      height: 200,
      marginBottom: -20
    }
  });

  return (
    <View style={globalStyles.main_screen_container}>
      {!currentUserInfo.verified ? (
        <CTAScreen
          body={languageStore.searching_disabled_message}
          buttonText={languageStore.get_verified}
          handleAction={() =>
            navigation.navigate(TabBarScreenNames.settings, {
              screen: MainStackScreenNames.settings_verify_identity_overview
            })
          }
          image={SearchGif}
          imageStyle={styles.search_gif}
          title={languageStore.searching_disabled_title}
        />
      ) : (
        <View style={styles.main}>
          <Searchbar
            iconColor={isDarkTheme && colors.white}
            inputStyle={globalStyles.text_regular}
            onChangeText={(text) => handleSearch(false, text)}
            onSubmitEditing={() => handleSearch(true, searchQuery)}
            placeholder={languageStore.search_for_villagers}
            placeholderTextColor={isDarkTheme ? colors.grey : colors.grey}
            selectionColor={colors.primary_light}
            style={styles.search_bar}
            value={searchQuery}
          />

          {loading ? (
            <View style={styles.placeholder_container}>
              <ListOfUsersPlaceholder twoLines={true} />
            </View>
          ) : (
            <View style={styles.results_container}>
              {noUsersFoundText ? (
                <Text
                  onPress={() => Keyboard.dismiss()}
                  style={[globalStyles.text_regular, styles.no_users_text]}
                  suppressHighlighting
                  variant="bodyLarge"
                >
                  {noUsersFoundText}
                </Text>
              ) : (
                <FlatList
                  data={usersToList}
                  keyExtractor={(_, index) => index}
                  renderItem={({ item, index }) => (
                    <UserListItem
                      displayLocation={true}
                      enlargePicture={true}
                      handlePictureAction={() =>
                        goToProfileScreen(
                          languageStore,
                          navigation,
                          item,
                          currentUserInfo,
                          true
                        )
                      }
                      index={index}
                      makeEverythingTouchable={true}
                      user={item}
                    />
                  )}
                  ItemSeparatorComponent={() => (
                    <View style={globalStyles.divider_thin} />
                  )}
                />
              )}
            </View>
          )}
        </View>
      )}
    </View>
  );
}

问题截图