如何在 react-native 中实现多群聊天? [英] How to implement a multiple group chat in react-native?

问题描述

我是 ReactNative 的初学者.

I am beginner to ReactNative.

我看到 在 React Native 中聊天，我也有类似的问题.

I saw Chat in React Native and I have a similar question.

我想要多个群聊，每个群聊都有完全不同的消息历史.

I want to have multiple group-chats with each group-chat having a complete different history of messages.

据我所知，标准方式是在应用程序渲染函数中重新使用相同的聊天组件(例如，GiftedChat)，并通过当前群聊的消息传递状态.

Standard way, as I get it, would be to re-use the same Chat component (e.g. GiftedChat) in the Apps render-function and pass the state with the messages of the current group-chat.

但这总是需要大量时间来重新渲染 - 我如何存储"不同群聊的视图以绕过重新渲染?

But this always takes a lot of time to re-render - how could I "store" the views of different group-chats to bypass the re-rendering?

有没有办法动态添加视图组件并只显示/隐藏它们?

Is there a way to dynamically add view components and just show/hide them?

推荐答案

我自己找到了解决方案.

I found a solution myself.

我在 ReactNative 中尝试了不同的导航器并注意到，每次导航时都会实例化 StackNavigator 的路由项.

I tried around with the different navigators in ReactNative and noticed, that route-items of StackNavigator are instantiated every time you navigate there.

TabNavigators 重复使用相同的实例.

TabNavigators reuse the same instance.

获得所需功能的两个步骤:

Two steps to get the desired functionality:

1) 禁用 TabBar 的可见性:

1) disable the visibility of the TabBar:

const TabNav = TabNavigator({
    Home: { screen: HomePage},    
    Chat1: { screen: ChatScreen}  ,
    Chat2: { screen: ChatScreen}  ,
     // ...
    },
    {
        navigationOptions: ({ navigation }) => ({
            tabBarVisible: false,
        }),});

2) 手动导航 - 例如通过按钮:

2) navigate manually - for example via a button:

<Button title="Chat1" onPress={() => this.props.navigation.navigate("Chat1") }/>

看一个简单的例子:

https://github.com/chrisdie/AwesomeNavigation/blob/master/src/tabbar2/App.js

这篇关于如何在 react-native 中实现多群聊天?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！