隐藏选项卡时如何在屏幕底部对有天赋的聊天呈现消息框做出反应

【问题标题】：How to have react gifted chat render message box at bottom of screen when tab is hidden隐藏选项卡时如何在屏幕底部对有天赋的聊天呈现消息框做出反应
【发布时间】：2017-05-22 12:09:59
【问题描述】：

所以我使用 react-native-gifted 聊天和反应导航。我的问题是我将标签栏设置为 false，但天才聊天的输入框呈现在它认为是标签栏的上方 - 这是隐藏的。

我怎样才能让它呈现全屏，或者让它不在隐藏的标签栏上方浮动。

 static navigationOptions = () => ({
    title: 'CHAT',
    tabBarLabel: 'Chat',
    tabBarVisible: false,
    tabBarIcon: ({ tintColor }) => (
      <View>
        <Icon
          name="comment"
          style={{ color: tintColor, fontSize: 32 }} />
      </View>
    ),

  });

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

我刚刚遇到了同样的问题，这就是我所做的：

在react-native-gifted-chat GitHub readme.md：它提供了一些我们可以使用的道具。

我们感兴趣的是：

bottomOffset (Integer) - 聊天距离底部的距离屏幕（例如，如果您显示标签栏很有用）

我的应用程序中有多个聊天屏幕，因此我通过为选项卡隐藏的屏幕传递一个名为 offsetFix 的道具有条件地应用了修复。代码如下：

<GiftedChat
    loadEarlier={...}

    isLoadingEarlier={...}
    messages={...}
    onSend={(message) => {...}}
    user={{
        _id: ...
        name: ...,
        avatar: ...,
    }}
    showUserAvatar={...}
    renderActions={...}
    placeholder={'Type a message...'}
    // Setting the offset to 50 (my tab bar height), 
    // fixed it for me.
    bottomOffset={this.props.offsetFix ? 50 : 0} // <---------------------------
/>

希望对您有所帮助。

【讨论】：