react-native - 在 React Native 中滚动 FlatList 时如何关闭键盘?
问题描述
我见过其他人询问试图让键盘保持不变或以其他方式操作,但我希望在用户开始滚动 FlatList 时关闭键盘。显然,ScrollView 有一个可以解决问题的属性keyboardDismissMode
,但我需要一个 FlatList。我还看到将 FlatList 包装在 ScrollView 中会导致 FlatList 渲染不正确,此处不推荐。还有其他方法可以做到这一点吗?在我的例子中,顶部有一个文本输入,下面有一个平面视图。
解决方案
需要先找到 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>
);
}
}
推荐阅读
- php - 通过 php-di 进行依赖注入的定义
- mysql - 如何通过 GraphQL 获取 mysql BLOB?
- python-3.x - 如何从 Python 3 中的 numpy 数组中按索引删除元素?
- pca - PCA 可以应用于 One-Hot-Encoded 数据吗?
- python - 在字符串中访问 python 列表或字典
- python-3.x - 创建配置文件以在 python 中存储开发和生产的 url
- javascript - 不支持的媒体文件类型
- python - 如何使用请求库进行两因素身份验证?
- node.js - 猫鼬更新嵌套文档的字段不起作用
- c++ - c ++如何访问指针的结构变量