我目前正在概述一个应用程序,其中包含最终具有与Instagram相似结构的Feed(包含带有文本的图像的卡片)。我概述了一个基本组件,现在我尝试在FlatList中呈现它。该组件应如下所示:
但是,当我在FlatList中渲染它时,它看起来像这样:
此外,当我尝试滚动时,滚动视图会弹回到顶部。我觉得这个问题是由我的listItem样式引起的,但我无法弄清楚什么是错误的/如何修复它。
以下是我用来设置ListItem样式的代码:
import EStyleSheet from 'react-native-extended-stylesheet';
export default EStyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f5fcff',
alignItems: 'center'
},
listing: {
backgroundColor: 'blue',
height: '60%',
width: '90%',
marginTop: 20,
marginBottom: 20,
flexDirection: 'column',
justifyContent: 'flex-start',
},
listingImage: {
backgroundColor: 'red',
// flexDirection: 'column',
// alignItems: 'flex-start',
flex: 0.8
},
listingInfo: {
backgroundColor: 'green',
flex: 0.2,
flexDirection: 'row',
justifyContent: 'flex-start',
},
hostImg: {
backgroundColor: '#0FFFA4',
flex: 0.3
},
listingText: {
backgroundColor: 'pink',
flex: 0.7,
flexDirection: 'column',
},
listingTitle: {
backgroundColor: '#0FD4FA',
flex: 1,
},
otherInfo: {
backgroundColor: 'orange',
flex: 1
}
});

定义ListItem:
import PropTypes from 'prop-types';
import React from 'react';
import { View, Text } from 'react-native';
import styles from './styles';
const Listing = ({ children }) => {
return (
<View style={styles.listing}>
<View style={styles.listingImage}>
</View>
<View style={styles.listingInfo}>
<View style={styles.hostImg}>
</View>
<View style={styles.listingText}>
<View style={styles.listingTitle}>
</View>
<View style={styles.otherInfo}>
</View>
</View>
</View>
</View>
);
};
Listing.propTypes = {
children: PropTypes.any,
};
export default Listing;
&#13;
最后是Feed视图的代码:
import React, { Component } from 'react';
import {StyleSheet, Text, View, FlatList} from 'react-native';
import { Listing } from '../../components/Cards';
import { FeedSeparator } from '../../components/Separators';
type Props = {};
export default class Feed extends Component<Props> {
render() {
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.titleStyle}> Feed </Text>
</View>
<View style={styles.listContainer}>
<FlatList
style = {{ flex: 1 }}
data={[
'a',
'b',
'c',
'd',
'e',
'f',
'g'
]}
renderItem={({ item }) => (
<Listing/>
)}
keyExtractor={item=>item}
ItemSeparatorComponent={FeedSeparator}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f5fcff',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
header: {
height: 80,
paddingTop: 30,
width: '100%',
backgroundColor: '#DDF1AD',
flexDirection: 'row',
justifyContent: 'center'
},
titleStyle: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
listContainer: {
flex: 1,
backgroundColor: 'blue',
marginTop: 14,
alignSelf: 'stretch'
}
});
&#13;
感谢您的帮助!
答案 0 :(得分:1)
如果您想拥有动态高度,则需要使用react-native的Dimensions模块。它可以让您访问使用应用程序的设备的高度和宽度。
导入:
import { Dimensions } from 'react-native'
解构:
const { height, width } = Dimensions.get('window')
现在您拥有使用您的应用程序的设备的高度和宽度。例如,您可以将这些值设置为组件的状态。