React Native FlatList 有时只响应触摸
React Native FlatList only responds to touches sometimes
我以前在我的应用程序的多个地方使用过 FlatList
,没有任何问题,但现在当我创建一个新的应用程序时,它似乎没有正确注册 touches/swipes。似乎只记录了 1/6 的触摸。
在此处观看视频:https://photos.app.goo.gl/NZCtVYX6GLVCQN392
我就是这样使用 FlatList
:
render() {
return (
<Container>
...
<FlatList
data={this.state.exercises}
renderItem={({item}) =>
<SetsRepsAndWeightItem exercise={item}/>
}
keyExtractor={item => item.name}
style={style.list}
/>
</Container>
);
}
和 SetsRepsAndWeightItem
:
render() {
return (
<View style={style.container}>
<View style={style.header}>
<Text style={style.headerText}>{this.props.exercise.name}</Text>
</View>
<View style={style.about}>
<TouchableWithoutFeedback onPress={this.handleSetsPressed}>
<StatisticNumber metric="Sets" value={7}/>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={this.handleRepsPressed}>
<StatisticNumber metric="Reps" value={5}/>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={this.handleWeightPressed}>
<StatisticNumber metric="kg" value={35}/>
</TouchableWithoutFeedback>
</View>
</View>
);
}
handleSetsPressed = () => {
console.log("sets pressed");
}
handleRepsPressed = () => {
console.log("reps pressed");
}
handleWeightPressed = () => {
console.log("weight pressed");
}
此外:TouchableWithoutFeedback
元素在被触摸时不会调用它们的 onPress
函数。
Container
就这么简单:
export default class Container extends Component {
static propTypes = {
children: Proptypes.any,
backgroundColor: Proptypes.string
};
render() {
const containerStyles = StyleSheet.flatten([
style.container,
this.props.backgroundColor ? { backgroundColor: this.props.backgroundColor } : null,
]);
return (
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
<View style={containerStyles}>
{this.props.children}
</View>
</TouchableWithoutFeedback>
);
}
}
以下两个修复解决了我的问题:
从 Container
组件中删除 onPress={() => Keyboard.dismiss()}
将 TouchableWithoutFeedback
移动到 StatisticNumber
组件中,并将 onPress
作为 SetsRepsAndWeightItem
[=25 的 prop 传递=]
我以前在我的应用程序的多个地方使用过 FlatList
,没有任何问题,但现在当我创建一个新的应用程序时,它似乎没有正确注册 touches/swipes。似乎只记录了 1/6 的触摸。
在此处观看视频:https://photos.app.goo.gl/NZCtVYX6GLVCQN392
我就是这样使用 FlatList
:
render() {
return (
<Container>
...
<FlatList
data={this.state.exercises}
renderItem={({item}) =>
<SetsRepsAndWeightItem exercise={item}/>
}
keyExtractor={item => item.name}
style={style.list}
/>
</Container>
);
}
和 SetsRepsAndWeightItem
:
render() {
return (
<View style={style.container}>
<View style={style.header}>
<Text style={style.headerText}>{this.props.exercise.name}</Text>
</View>
<View style={style.about}>
<TouchableWithoutFeedback onPress={this.handleSetsPressed}>
<StatisticNumber metric="Sets" value={7}/>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={this.handleRepsPressed}>
<StatisticNumber metric="Reps" value={5}/>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={this.handleWeightPressed}>
<StatisticNumber metric="kg" value={35}/>
</TouchableWithoutFeedback>
</View>
</View>
);
}
handleSetsPressed = () => {
console.log("sets pressed");
}
handleRepsPressed = () => {
console.log("reps pressed");
}
handleWeightPressed = () => {
console.log("weight pressed");
}
此外:TouchableWithoutFeedback
元素在被触摸时不会调用它们的 onPress
函数。
Container
就这么简单:
export default class Container extends Component {
static propTypes = {
children: Proptypes.any,
backgroundColor: Proptypes.string
};
render() {
const containerStyles = StyleSheet.flatten([
style.container,
this.props.backgroundColor ? { backgroundColor: this.props.backgroundColor } : null,
]);
return (
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
<View style={containerStyles}>
{this.props.children}
</View>
</TouchableWithoutFeedback>
);
}
}
以下两个修复解决了我的问题:
从
Container
组件中删除onPress={() => Keyboard.dismiss()}
将
[=25 的 prop 传递=]TouchableWithoutFeedback
移动到StatisticNumber
组件中,并将onPress
作为SetsRepsAndWeightItem