时间戳

首页 > 解决方案 > React Naitve 只显示一个视图

javascript - React Naitve 只显示一个视图

问题描述

在我的主屏幕上的应用程序中，我正在用我的项目渲染一个 ListList。现在我想在它上面添加一点信息文本。但它只显示我的文本并跳过（？）我的 FlatList。谁能帮助我并向我解释这种行为？

如果我的文件中有我的文本组件，它只显示文本。如果我只使用 FlatList 它会正确显示我的数据列表。但如果我尝试将两者结合起来，它只会显示一个组件。当我只使用 FlatList 并将其包装在 View 中时，同样的事情，我只会得到一个白色的空白屏幕。

const JobsScreen = (props) => {
  const dispatch = useDispatch();

  const [isLoading, setIsLoading] = useState(false);
  const [isRefreshing, setIsRefreshing] = useState(false);

  const allJobs = useSelector((state) => state.job.availableJobs);

  const loadJobs = useCallback(async () => {
    setIsRefreshing(true);

    try {
      await dispatch(jobActions.fetchAllJobs());
    } catch (err) {}

    setIsRefreshing(false);
  }, [dispatch]);

  useEffect(() => {
    setIsLoading(true);
    loadJobs().then(() => {
      setIsLoading(false);
    });
  }, [dispatch, loadJobs]);

  useEffect(() => {
    const willFocusSub = props.navigation.addListener("willFocus", loadJobs);

    return () => {
      willFocusSub.remove();
    };
  }, [dispatch, loadJobs]);

  if (isLoading) {
    return (
      <View
        style={{
          flex: 1,
          justifyContent: "center",
          alignItems: "center",
          backgroundColor: "#2f3640",
        }}
      >
        <ActivityIndicator size="large" color="#fff" animating />
      </View>
    );
  }

  return (
    <View>
      <FlatList
        data={allJobs}
        onRefresh={loadJobs}
        refreshing={isRefreshing}
        keyExtractor={(item) => item.id}
        style={{ flex: 1, backgroundColor: "#1a191e" }}
        renderItem={(itemData) => (
          <JobItem
            description={itemData.item.description}
            titel={itemData.item.titel}
            fname={itemData.item.fname}
            cover={itemData.item.cover}
            genre={itemData.item.genre}
            year={itemData.item.year}
            id={itemData.item.id}

            //           friend={itemData.item.friend}
          />
        )}
      />
    </View>
  );
};

标签： javascriptreactjsnative

解决方案

我自己搞定的。

 <View style={{ height: "100%" }}>

解决了。

推荐阅读