javascript - 在 React JS 和 iOS 中，底部标签被底部标签导航器截断

Question

我有一个使用 expo 创建的应用程序并做出原生反应。它通过对数组的映射创建卡片。在浏览器上运行时一切正常。当我在 iOS 上运行时，它的底部卡片部分位于底部选项卡导航器下方。我想要底部选项卡导航器上方的一些填充，但不知道该怎么做。起作用的一件事是将 paddingBottom 添加到内联样式中，但这会在卡片之间产生很大的间隙，我只希望最底部的卡片具有该填充。

图片：

正在映射的卡片代码：

let completedUserImages = "";
  if (linksUpdated) {
    completedUserImages = user.completedImageLinks.map((image) => (
      <Card
        elevation={5}
        style={{
          padding: 5,
          margin: 10,
          borderRadius: 15,
        }}
        key={image.metadata.name}
      >
        <Card.Title
          title={image.metadata.name}
          titleStyle={{ textAlign: "center" }}
        />
        <Image
          style={{ height: 400, resizeMode: "contain" }}
          source={{ uri: image.link }}
        />
        <Card.Content>
          <ImageForm
            key={image.metadata.id}
            name={image.metadata.name.split("_").pop()}
            fromPath={image.metadata.path_lower}
          />
        </Card.Content>
      </Card>
    ));
  } else {
    completedUserImages = <Skeleton />;
  }

return (
    <ScrollView
      style={styles.container}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }
    >
      <Text style={styles.text}>Review Images</Text>
      {completedUserImages}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 48,
    backgroundColor: "#cf9d13",
  },
  text: {
    fontSize: 24,
    textAlign: "center",
    color: "#ffffff",
    backgroundColor: "#cf9d13",
  },
});

底部标签的代码

export default function MainStackScreens() {
  const MainStack = createBottomTabNavigator();

  const tabBarOptions = {
    showLabel: false,
    style: {
      backgroundColor: "#cf9d13",
      paddingBottom: 12,
    },
  };

  const screenOptions = ({ route }) => ({
    tabBarIcon: ({ focused }) => {
      let iconName = "home";

      switch (route.name) {
        case "Home":
          iconName = "images-sharp";
          break;

        case "Review":
          iconName = "arrow-redo-sharp";
          break;

        case "Notifications":
          iconName = "notifications";
          break;

        case "Profile":
          iconName = "person";
          break;

        case "Post":
          iconName = "add-circle";
          break;

        default:
          iconName = "images-sharp";
      }

      return (
        <Icon
          name={iconName}
          size={24}
          color={focused ? "#ffffff" : "#666666"}
        />
      );
    },
  });

  return (
    <MainStack.Navigator
      tabBarOptions={tabBarOptions}
      screenOptions={screenOptions}
    >
      <MainStack.Screen name="Home" component={HomeScreen} />
      <MainStack.Screen name="Review" component={ReviewScreen} />
      <MainStack.Screen name="Post" component={PostScreen} />
      {/* <MainStack.Screen name="Notifications" component={NotificationsScreen} /> */}
      <MainStack.Screen name="Profile" component={ProfileScreen} />
    </MainStack.Navigator>
  );
}

标签： javascriptcssiosreact-nativereact-navigation