即使删除了行为，KeyboardAvoidingView 也无法在 Android 上运行

Posted 2023-04-18

【中文标题】即使删除了行为，KeyboardAvoidingView 也无法在 Android 上运行

【英文标题】：KeyboardAvoidingView isn't working on Android even when behavior is deleted

【发布时间】：2018-10-03 17:38:15

【问题描述】：

我在 android 上遇到了 KeyboardAvoidingView 的问题。它适用于 ios。我的屏幕在屏幕的上半部分有一个视图组件，可能会也可能不会影响它。我已经尝试删除这些组件中的每一个，但 KeyboardAvoidingView 仅在我删除占据屏幕 60% 的组件时才有效。此组件是来自“react-native-youtube”的 YouTube 播放器，具有 flex: 1 样式。

我的代码看起来像这样..

<KeyboardAvoidingView
  behavior="padding"
  keyboardVerticalOffset=200
>
  <View style=styles.first>
    <View style=styles.second>
      <TouchableHighlight />
      <View style=styles.third>
        <TextInput 
          style=styles.textInput
          maxLength=80
          autoGrow=true
          maxHeight=130
          multiline=true
          editable=true
          onChangeText=onChange
          value=descriptionText
          autoFocus=true
          keyboardType='default'
          autoCorrect=false
          placeholder='Send a word'
          underlineColorAndroid=white
          selectionColor=purple
          returnKeyType='send'
          onSubmitEditing=handleSubmit
        />
      </View>
    </View>
  </View>
<KeyboardAvoidingView/>

first: 
  flexDirection: 'column',
  justifyContent: 'flex-start',
  position: 'relative',
  marginTop: 0,
,
second: 
  width: screenWidth,
  flexDirection: 'row',
  alignItems: 'center',
  paddingTop: 5,
  paddingBottom: 9,
,
third: 
  flexDirection: 'row',
  borderTopLeftRadius: 10,
  borderBottomLeftRadius: 10,
  paddingBottom: 5,
  paddingLeft: 10,
  paddingRight: 10,
  width: screenWidth - 102,
  minHeight: 36,
  alignItems: 'center',
,
textInput: 
  textAlign: 'left',
  fontSize: 14,
  fontWeight: '400',
  flex: 1,
  padding: 0,
  margin: 0,

这里有什么可能会影响KeyboardAvoidingView 的功能吗？我已经尝试删除 behavior="padding" ，因为 React Native 文档提到删除该道具后它在 android 上效果更好。

谢谢！

【参考方案1】：

尝试将 flex 添加到所有样式可能会有所帮助，也许在 KeyboardAvoidingView 中也可能会有所帮助。

<KeyboardAvoidingView
  style=flex: 1
  keyboardVerticalOffset=0
  behavior='padding'
>

小吃博览会：https://snack.expo.io/BJT-4Fphz

【讨论】：

这也不起作用。尝试将flex: 1 添加到它周围的每个视图中。然后一个一个地拿走，它没有用:(谢谢！任何其他建议都很棒

@Dres 你可以在我上面的零食链接里玩。

谢谢！比在我正在开发的应用程序中重新加载要容易得多。我认为上半部分的内容可能导致这种预期行为的发生。我会继续努力的！

【参考方案2】：

使用键盘可能很困难。

不过，Android（仅此一次）确实让它变得更简单了。

import  Platform  from 'react-native';

const isAndroid = Platform.OS === 'android';

componentDidMount() 
  if (isAndroid) 
    SoftInputMode.set(SoftInputMode.ADJUST_PAN);
  

【讨论】：

不行，我从github.com/MR03web/react-native-set-soft-input-mode 获得了 SoftInputMode，它让我编辑 build.gradle、settings.gradle 和 mainapplication.java。完成所有这些后我遇到了错误。不过谢谢！