小编Ozz*_*zie的帖子

我怎样才能像 Whatsapp 聊天屏幕中的那样精确地做一个类似的日期系统？

如您所见，消息按日期分组，我的意思是它们按日期分隔。

这是我找到的屏幕截图，以便更好地解释：

我在 FlatList 中执行此操作，同时一一呈现消息。

这是我所做的

        let previousDate = "";
    if (index > 0) {
        previousDate = moment(this.state.messages[index - 1].created_at).format(
            "L"
        );
    } else {
        previousDate = moment(this.state.messages.created_at).format("L");
    }

    let currentDate = moment(item.created_at).format("L");

所以，我创建了一个功能组件renderItem的FlatList的道具，所以item和index来自从FlatList的实际数据。

我在这里要做的是，基本上抓取当前渲染项created_at并将其与前一项进行比较created_at，为此，我使用存储在状态中的原始数据。但不幸的是，当 FlatList 呈现具有索引号的第一个项目时，0在状态的原始数据中没有前一个元素要比较，这就是为什么我检查是否大于 0 并从前一个索引项目中获取日期。在 Else 情况下，这意味着在渲染第一个项目时，不要查找前一个项目而只获取created_at.

下面我检查currentDate和previousDates 是否不同，渲染自定义组件，否则不渲染任何内容。

    {previousDate && !moment(currentDate).isSame(previousDate, "day") ? ( // custom component) : null}

它应该像那样工作，但主要问题是，我使用invertedFlatList 来使消息从屏幕底部到顶部。但是现在，因为它是一个倒置的平面列表，从底部到顶部渲染的项目，它给了我这样的结果：

注意：一开始，消息也被反转了，但我通过发送它们也从数据库中反转来解决了这个问题。 …

我在我的项目中使用 React navigation 5，并且在项目中的某个地方我需要制作嵌套导航器，如下所示：

*Stack Navigator
**Material top tab navigatior
***Material bottom tab navigator
**** Stack Navigator

我的目标是，实际上我想要拥有 3 个像 Instagram 一样的静态屏幕。左侧是相机，中间是实际内容，右侧是其他内容。只有当你位于中心时，我才希望底部选项卡可见，这就是我这样创建它的原因。在这种情况下，在所有屏幕中，您可以向右或向左滑动以到达相机或右侧组件。

但我想做的是，我想在中心组件的详细屏幕中“禁用”滑动操作。因为中心组件是上面的材质底部选项卡导航器，还包含一些堆栈导航器，例如 posts、postDetail。当我转到 postDetail 时，我想禁用向左或向右滑动操作。因为在某些细节上我使用了一些可滑动的元素，例如反应本机滑动器等。

我试图提供gesturesEnabled: false , swipeEnabled: false材质底部导航器作为道具，但它不起作用，因为它是底部选项卡导航器并且不接受这些参数。

我还尝试捕获状态索引，如果它大于 0 或 1，我将禁用它，但在材料顶部选项卡导航器中，当我转到 postDetail 时，导航器不会更改索引。它不像以前的版本（react navigation 4）那样工作。

*Stack Navigator
**Material top tab navigatior
***Material bottom tab navigator
**** Stack Navigator

我怎样才能在 FlatList 组件中的 react native 中实现这样的视图？

通常在 web 中使用 css grid 很容易，但我无法在 react native 中做到这一点。