Android端Gifted Chat组件InputToolbar键盘弹出时位置异常求助
Android端Gifted Chat键盘弹出时InputToolbar位置异常问题
Android端使用Gifted Chat组件时,遇到键盘弹出状态下InputToolbar位置异常的问题:
- 给InputToolbar添加
marginBottom会导致内部textInput位置偏移; - 调整textInput的margin又会影响InputToolbar整体布局;
- 键盘关闭后重新打开,所有设置的
marginBottom全部失效。
iOS设备无此问题。
截图说明
- 键盘弹出无margin时的位置:

- 给InputToolbar加margin后的位置:

- 给textInput加margin后的位置:

相关代码
<View style={{backgroundColor: backgroundColor, flex: 1}}> <GiftedChat messages={messages} onSend={handleSend} renderSend={renderSend} user={mapUser(auth.currentUser)} loadEarlier={loadEarlier} isLoadingEarlier={isLoadingEarlier} isTyping={typing != null} onLoadEarlier={handleLoadEarlier} onInputTextChanged={handleInputTextChanged} renderBubble={renderBubble} bottomOffset={-10} listViewProps={{ keyboardDismissMode: "on-drag" }} style={{backgroundColor: backgroundColor}} renderFooter={renderFooter} list renderInputToolbar={(props) => ( <InputToolbar {...props} containerStyle={{ backgroundColor: '#F4F4F4', marginLeft: 15, marginRight: 15, marginBottom: isKeyboardVisible ? (Platform.OS === 'android' ? 0 : 35) : (Platform.OS === 'android' ? 10 : 35), borderColor: 'grey', height:44, borderRadius: 25 }} textInputStyle={{ color: '#333333', marginBottom: isKeyboardVisible ? (Platform.OS === 'android' ? 0 : 40) : 40, fontSize: 14, fontFamily: 'Roboto-medium', }} placeholder="Votre message ..." /> )} renderChatFooter={() => ( <View style={{marginVertical: isKeyboardVisible ? (Platform.OS === 'android' ? 0 : 0) : (Platform.OS === 'android' ? 5 : 20)}}/> // 20 )} /> </View>
已尝试调整不同的marginBottom值,问题未解决。
内容的提问来源于stack exchange,提问作者KarimK3
相关产品推荐
相关产品推荐

