FlatList 中的 TextInput 在离屏时失去焦点

Question

当 TextInput 被聚焦并且用户滚动直到输入离开可见框架时，输入变得模糊并且键盘消失。我该如何解决？

我在 Android 模拟器中运行代码。在 iOS 上不会出现此问题。如果您尝试点击 FlatList 底部的 TextInput，则键盘会立即关闭，这可能是因为 Input 在打开后位于键盘下方。任何线索将不胜感激

这是要重现的代码

import React from 'react';
import { TextInput, FlatList } from 'react-native';

export default class App extends React.Component {
    render() {
        return (

        <FlatList

            data={["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t"]}
            keyExtractor={item => item}
            renderItem={({item}) => (
                <TextInput placeholder="0.0"
                    keyboardType='decimal-pad'

                    onFocus={() => {void(0)}}
                />
            )}
        />  
        );
    }
}

Input 应该保持焦点并且用户应该能够输入文本，即使 Input 不可见。这使得整个应用程序无法在 Android 上使用

Answer 1

如果在FlatList不输入数据的情况下用于渲染视图，则需要设置removeClippedSubviews={true}或使用优化渲染视图的默认选项。

对于您的情况（使用输入渲染），您应该设置removeClippedSubviews={false}为防止键盘隐藏/显示。

<FlatList removeClippedSubviews={false} />

Answer 2

将 Flatlist 保留在 ScrollView 内，以便单击底部文本输入时视图会向上移动并允许显示键盘。

 <ScrollView>
    <FlatList
        data={["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t"]}
        keyExtractor={item => item}
        renderItem={({item}) => (
            <TextInput placeholder="0.0"
                keyboardType='decimal-pad'
                onFocus={() => {void(0)}}
            />
        )}
    />  
</ScrollView>