我尝试使用react-native-image-header-scroll-view,它总是显示相同的问题“元素类型无效:需要字符串(对于内置组件)或类/函数(对于复合组件),但得到:您可能忘记了从定义组件的文件中导出组件,或者您可能混淆了默认导入和命名导入"。我试着降级版本,但仍然不起作用。
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,
},
});
2条答案
按热度按时间gz5pxeao1#
我找到解决你问题的方法了。我可以在node_modules > react-native-image-header-scroll-view > lib中看到,但我没有找到HeaderImageScrollView文件。
因此,您可以替换ImageHeaderScrollView而不是HeaderImageScrollView。
以下是示例:
上面的例子解决了你的问题。
vwkv1x7d2#
对于最近也面临这个问题的人来说,解决方案是更新库
还确保进口如下