[英]How do I hide the ListHeaderComponent during scroll in a React Native flatlist
[英]How do I pass props to ListHeaderComponent?
所以我从我的第一个组件导航到 FooItems 页面,并将道具传递给导航。
showFooItemsPage = () => {
this.props.navigation.navigate('FooItemsComponent', {
fooItems: this.props.fooItems});
};
在我的 FooItemsComponents 上,我有一个带有 renderItems function 的平面列表,它正在工作。 但是,我想对 Flatlist 项目列表进行更改,然后我想在我的 Flatlist 组件的 header 中单击保存。
我现在遇到的主要问题是将道具发送到我的 Flatlist 的 Header 组件。 道具未定义,我不知道如何从我的 FooItemsComponent 或当我在页面之间导航时发送道具?
这是我的 FooItemsComponent 的一些片段:
class Header extends Component {
constructor(props) {
super(props);
}
async componentDidMount() {
//call some reducer action
}
save = items => {
this.props.saveItems(items);
this.props.navigation.navigate("previousComponent");
}
render() {
const {navigation, loading } = this.props;
return (
<View>
<View style={styles.header}>
<TouchableOpacity onPress={this.save}>
<Text style={styles.saveText}>Save</Text>
</TouchableOpacity>
</View>
<View
style={{
borderTopWidth: 1,
borderTopColor: Colors.grey,
height: 1,
}}>
</View>
</View>
);
}
}
export class FooItemsComponent extends Component {
constructor(props) {
super(props);
}
async componentDidMount() {
//some reducer action
}
renderItem = item => {
if (item.load) {
return <ActivityIndicator color={Colors.activityColor} size="small" />;
} else {
return (
<View>
<FooItems
{...item}
navigation={this.props.navigation}
showParticularItems={true}
/>
</View>
); }
};
render() {
const { fooItems, navigation, loading, props} = this.props;
if (!fooItems) fooItems = [];
return (
<View style={styles.container}>
<FlatList
keyExtractor={(item, index) => `key-${index}`}
data={fooItems}
renderItem={item => this.renderItem(fooItems.item)}
ItemSeparatorComponent={Separator}
ListHeaderComponent={Header}
ListFooterComponent={loading ? LoadingFooter : Separator}
/>
</View>
);
}
}
将您的组件作为 React 元素传递:
<FlatList
keyExtractor={(item, index) => `key-${index}`}
data={fooItems}
renderItem={item => this.renderItem(fooItems.item)}
ItemSeparatorComponent={Separator}
ListHeaderComponent={<Header yourProps={'blabla title'}/>}
ListFooterComponent={loading ? LoadingFooter : Separator}
/>
并在Header
组件中使用this.props.yourProps
永远不要使用箭头函数来渲染作为 props 传递的组件,React 不会有对 function 的稳定引用,因此不会知道 header 组件应该是渲染之间的相同组件。 它可能会导致错误并会损害性能。 有关它可能导致的错误的示例,请参阅FlatList 中的 SearchBar 在键入后失去焦点。 虽然,Idan 已经非常接近找到正确的解决方案了。 相反,请执行以下操作:
<FlatList
keyExtractor={(item, index) => `key-${index}`}
data={fooItems}
renderItem={item => this.renderItem(fooItems.item)}
ItemSeparatorComponent={Separator}
ListHeaderComponent={<Header yourProps={'blabla title'}/> }
ListFooterComponent={loading ? LoadingFooter : Separator}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.