React Native Gifted Chat的问题,Android的InputToolbar位置

kyks70gy  于 2023-10-22  发布在  React
关注(0)|答案(1)|浏览(179)

我想知道当键盘可见时如何正确修复InputToolbar的位置。
如果我添加marginBottom,textInput的位置就会改变。如果我改变textInput的位置,InputToolbar的位置也会改变,当键盘关闭和再次打开时,每个marginbottom都被忽略。

在iOS设备上一切都很好,这个问题只适用于Android。

<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值

lskq00tm

lskq00tm1#

你可以把它添加到你的代码中:

import { Platform, KeyboardAvoidingView } from 'react-native';

{ Platform.OS === 'android' ? < KeyboardAvoidingView behavior="height" /> : null }

{ Platform.OS === 'iOS' ? < KeyboardAvoidingView behavior="height" /> : null }

相关问题