タブが隠されているときに才能のあるチャットのレンダリングメッセージボックスを画面の下部に表示する方法

Question

私は反応ネイティブ才能のチャットを反応ナビゲーションとともに使用しています。私の問題は、タブバーをfalseに見えるように設定していることです。しかし、才能のあるチャットの入力ボックスは、タブバーであると考えられるものの上にレンダリングされます。

どうすればフルスクリーンで表示するか、非表示のタブバーの上に浮かせないようにすることができます。

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

    }); 

Answer 1

私は同じ問題を抱えていたし、ここで私がやったことだ：react-native-gifted-chat GitHub readme.mdオン

：それは我々が使用することができますいくつかの小道具を提供します。

我々が興味を持っている1がされています

bottomOffset（整数） - 画面の下からのチャットの距離（例えば有益なあなたはタブバーを表示する場合）

私は私のアプリで複数のチャット画面を持っているので、タブが隠れている画面に対しては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} // <--------------------------- 
 
/>

役に立てば幸い：ここでは、コードです。