键盘避免视图在平面列表页脚中不起作用答案

【问题标题】：keyboardavoidingview not working in flatlist footer键盘避免视图在平面列表页脚中不起作用
【发布时间】：2021-01-18 07:00:59
【问题描述】：

我无法让平面列表远离其页脚中的数据输入字段。这是我的代码：

import React, { useState, useEffect } from 'react';
import { View, Text, Alert , TextInput, Button, Platform, KeyboardAvoidingView,Animated,Easing} from 'react-native';
import { FlatList } from 'react-native-gesture-handler';


export function PlayAreaScreen({ route, navigation }) {

const [itemsToShow, setitemsToShow] = React.useState([{key:'0',name:"sdfsdfds"}]);

const PopulateTestData = () =>{
const DATA = [];
  for (let index = 0; index < 6; index++) {
    DATA.push({key:index.toString(), name:`index ${index}`});
  }
setitemsToShow(DATA);
console.log(itemsToShow);
}

const MyFooter = (props) =>{
const [sometext, setsometext] = React.useState('');
return(
  <View style={{borderWidth:1}}>
  <TextInput value={sometext} onChangeText={(text) => setsometext(text)} placeholder="Enter data here"></TextInput>
  </View>
)
}

React.useEffect(()=>{

  PopulateTestData();
  }, []);
return (
<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "position" : "height"}>
  <FlatList
  data={itemsToShow}
  ListFooterComponent = {MyFooter}
  keyExtractor={(item) => item.key}
  renderItem={(item) => <KeyboardAvoidingView style={{height:80, borderWidth:1}}><Text>{item.item.name}</Text></KeyboardAvoidingView>}
  >

  </FlatList>
  </KeyboardAvoidingView>
)

}

基本上它根本不滚动平面列表。如果我在平面列表中只有一两个项目，它显然可以工作，因此它不需要滚动以适应键盘。

这是一张显示如何覆盖数据输入字段的图片：

谢谢，

马尼什

【问题讨论】：

标签： react-native react-native-ios

【解决方案1】：

让我们试试KeyboardAwareScrollView 来自react-native-keyboard-aware-scroll-view，一些信息here

【讨论】：

我已经尝试过了，但它不起作用。我试图将平面列表包装在该视图中，但随后我收到错误消息：“VirtualizedLists 永远不应嵌套在具有相同方向的普通 ScrollViews 中 - 请改用另一个 VirtualizedList 支持的容器”。我试图将页脚组件包装在keyboardawarescrollview 中，但它没有做任何事情。我认为这是 flatlist 拒绝 make 空间的问题，因此 textinput 可以获取键入的数据...我想知道其他人是否遇到过类似的问题。它也适用于android。这只是 android 的问题。
让我们参考this issue
如果我遵循该 scrollawareflatlist 它可以在 ios 上运行，但它会破坏 android，因为当我在 textinput 上输入任何内容时，android 会不断失去焦点。它在 android 中工作，而我没有做任何这种滚动感知的东西。我认为在平面列表之后输入文本数据在 ios 和 android 中都不起作用。（特别是如果平面列表可能有点长..（只有一两个全屏值得滚动）