请帮助React Native Image Header滚动视图

Question

我尝试使用react原生图像标题滚动视图，但它总是向我显示相同的问题"元素类型无效：应为字符串(用于内置组件(或类/函数(用于复合组件(，但实际为：未定义。您可能忘记了从中定义的文件导出组件，或者您可能混淆了默认导入和命名导入；。我试图降低版本，但仍然没有成功。

import React from 'react';
import {
View,
Text,
Image,
StyleSheet,
Dimensions,
StatusBar,
Platform,
} from 'react-native';
import { HeaderImageScrollView, TriggeringView } from 'react-native-image-header-scroll-view';

const MIN_HEIGHT = Platform.OS === 'ios' ? 90 : 55;
const MAX_HEIGHT = 350;
const CardItemDetails = ({route}) => {
const itemData = route.params.itemData;
return (
<View style={styles.container}>
<HeaderImageScrollView  maxHeight={MAX_HEIGHT} minHeight={MIN_HEIGHT} renderHeader={() => (<Image source={itemData.image} style={styles.image} />)}>
<TriggeringView>
<View>
<Text style={styles.title}>Overview</Text>
</View>
</TriggeringView>
</HeaderImageScrollView>
</View>
);
};
export default CardItemDetails;
const styles = StyleSheet.create({
container: {
flex: 1,
},
image: {
height: MAX_HEIGHT,
width: Dimensions.get('window').width,
alignSelf: 'stretch',
resizeMode: 'cover',
},
title: {
fontSize: 20,
},
name: {
fontWeight: 'bold',
},
section: {
padding: 20,
borderBottomWidth: 1,
borderBottomColor: '#cccccc',
backgroundColor: 'white',
},
sectionTitle: {
fontSize: 18,
fontWeight: 'bold',
},
sectionContent: {
fontSize: 16,
textAlign: 'justify',
},
categories: {
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'flex-start',
flexWrap: 'wrap',
},
categoryContainer: {
flexDirection: 'row',
backgroundColor: '#FF6347',
borderRadius: 20,
margin: 10,
padding: 10,
paddingHorizontal: 15,
},
category: {
fontSize: 14,
color: '#fff',
marginLeft: 10,
},
titleContainer: {
flex: 1,
alignSelf: 'stretch',
justifyContent: 'center',
alignItems: 'center',
},
imageTitle: {
color: 'white',
backgroundColor: 'transparent',
fontSize: 24,
},
navTitleView: {
height: MIN_HEIGHT,
justifyContent: 'center',
alignItems: 'center',
paddingTop: Platform.OS === 'ios' ? 40 : 5,
opacity: 0,
},
navTitle: {
color: 'white',
fontSize: 18,
backgroundColor: 'transparent',
},
sectionLarge: {
minHeight: 300,
},
});

Answer 1

我找到了解决您问题的方法。我可以在node_modules>react原生图像标题滚动视图>lib，但我找不到HeaderImageScrollView文件。

因此，您可以替换ImageHeaderScrollView而不是HeaderImageScrollView。

以下是示例：

<View style={styles.container}>
<ImageHeaderScrollView  maxHeight={MAX_HEIGHT} minHeight={MIN_HEIGHT} renderHeader={() => (<Image source={itemData.image} style={styles.image} />)}>
<TriggeringView>
<View>
<Text style={styles.title}>Overview</Text>
</View>
</TriggeringView>
</ImageHeaderScrollView>
</View>

上面的例子解决了你的问题。

Answer 2

对于最近也面临这个问题的人，解决方案是更新库

npm update react-native-image-header-scroll-view

同时确保进口如下

import ImageHeaderScrollView, { TriggeringView } from 'react-native-image-header-scroll-view';