React-native,Android,键盘推动标题,但标题应保持可见

问题描述 投票:0回答:1

enter image description here

我已经显示了我的标题“Rozmowy z fizjoterapeutą”,我打开输入,然后键盘显示,我的标题被推到顶部。

enter image description here

   <Stack.Navigator
      screenOptions={{
        headerTintColor: '#2D31A6',
        headerTitleAlign: 'center',
        headerTitleStyle: {
          fontSize: 24,
          fontWeight: 'bold',
        },
        headerShadowVisible: false,
      }}
    >
  <Stack.Screen
        name="Chat"
        component={Chat}
        options={() => ({
          title: 'Rozmowy z fizjoterapeutą',
          contentStyle: {
            backgroundColor: '#FFFFFF',
          },
        })}
      />
    </Stack.Navigator>

这是我的聊天组件:

   <GiftedChat
      renderSend={renderSend}
      renderMessageVideo={renderMessageVideo}
      renderChatFooter={renderChatFooter}
      renderCustomView={renderCustomView}
      messages={messages}
      alwaysShowSend
      onSend={(newMessages) => {
        //@ts-ignore
        onSend(newMessages);
      }}
      user={{
        _id: currentUser,
      }}
    />

我已经 android:windowSoftInputMode="adjustPan"

我的期望: 我打开输入,键盘显示并且标题“Rozmowy z fizjoterapeutą”可见。

android react-native scroll keyboard
1个回答
0
投票
In order to get the desired behaviour on the Android platform, 
you must include android:windowSoftInputMode="adjustResize"> 
in the AndroidManifest.xml file. With this setting, 
the system is instructed to use the adjustResize mode to reorganise the 
activity's layout to make room for the soft keyboard.

    import { KeyboardAvoidingView, Platform } from 'react-native';
        return (
          <KeyboardAvoidingView
            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
            style={{ flex: 1 }}
          >
            {/* Here is the code for your current component. */}
          </KeyboardAvoidingView>
        );
        
        <GiftedChat
          // ... other props
          keyboardShouldPersistTaps="handled"
        />
        
        <Stack.Screen
         name="Chat"
         component={Chat}
         options={() => ({
         title: 'Rozmowy z fizjoterapeutą',
         contentStyle: {
           backgroundColor: '#FFFFFF',
         },
         headerStyle: {
          elevation: 0, // This can remove the shadow on the header
         },
       })}
     />
        

尝试一下这些解决方案是否对您有效。请记住,在 Android 和 iOS 上进行测试至关重要,因为这两个系统的行为可能会有所不同。

© www.soinside.com 2019 - 2024. All rights reserved.