react-native - 在 React Native 中滚动 FlatList 时如何关闭键盘？

Question

我见过其他人询问试图让键盘保持不变或以其他方式操作，但我希望在用户开始滚动 FlatList 时关闭键盘。显然，ScrollView 有一个可以解决问题的属性keyboardDismissMode，但我需要一个 FlatList。我还看到将 FlatList 包装在 ScrollView 中会导致 FlatList 渲染不正确，此处不推荐。还有其他方法可以做到这一点吗？在我的例子中，顶部有一个文本输入，下面有一个平面视图。

标签： react-native

Answer 1

需要先找到 flatlist 滚动的时间

当滚动开始时，只需关闭键盘

工作示例：https ://snack.expo.io/@msbot01/biased-kiwi

import * as React from 'react';

import { View, Text, Image, FlatList, TextInput, Keyboard } from 'react-native';

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fb5d91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-1465571e29d72',
    title: 'Third Item',
  },
  {
    id: 'bd7acbea-c1b1-46c2-aed65-3ad753abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f68-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
  {
    id: 'bd7acbea-c1b1-46c2-aed56-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-1455716e29d72',
    title: 'Third Item',
  },
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53a6bb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa697f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d672',
    title: 'Third Item',
  },

  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb268ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91a6a97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-1455716e29d72',
    title: 'Third Item',
  },
];

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  

  onChangeText(e){
    this.setState({
      value: e
    })
  }

  renderItem(item) {
    return (
      <View style={{ width: '100%', marginTop: 10}}>
        <Text style={{ width: '100%' }}>{item.title} </Text>
        <TextInput
          style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
          onChangeText={(text) => {this.onChangeText(text)}}
          value={this.state.value}
        />
      </View>
    );
  }

  render() {
    return (
      <View style={{ flex: 1, padding:10 }}>
        <FlatList
          onScrollBeginDrag={() => Keyboard.dismiss()}
          contentContainerStyle={{ flexGrow: 1 }}
          data={DATA}
          renderItem={({ item }) => this.renderItem(item)}
          keyExtractor={(item) => item.id}
        />
      </View>
    );
  }
}