Я создал экран, на котором отображается компонент, содержащий FlatList. По какой-то причине я не могу прокручивать список. Кто-то, кто может определить мою ошибку и указать мне в правильном направлении?
render-function и style из моего файла экрана:
render() {
return (
<View style={styles.container}>
<SearchBar />
<ActivityList style={styles.list} data={this.state.data} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
overflow: 'hidden',
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'flex-start',
},
list: {
flex: 1,
overflow: 'hidden',
},
});
рендерить функцию и стиль из моего компонента listitem:
export default class CardItem extends React.PureComponent {
render() {
return (
<View style={styles.cardview}>
<View style={styles.imagecontainer}>
<Image
resizeMode="cover"
style={styles.cardimage}
source={{
uri: this.props.image,
}}
/>
</View>
<View style={styles.cardinfo}>
<Text style={styles.cardtitle}>{this.props.title}</Text>
<View style={styles.cardtext}>
<Text style={styles.textdate}>{this.props.date}</Text>
<Text style={styles.texthour}>{this.props.hour}</Text>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
cardview: {
flex: 1,
justifyContent: 'flex-start',
backgroundColor: 'white',
elevation: 3,
maxHeight: 200,
width: Dimensions.get('window').width - 20,
margin: 1,
marginTop: 10,
borderRadius: 4,
},
imagecontainer: {
flex: 7,
height: 140,
borderRadius: 4,
},
cardimage: {
flex: 1,
opacity: 0.8,
height: 140,
borderTopLeftRadius: 4,
borderTopRightRadius: 4,
},
cardinfo: {
flex: 2,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
padding: 10,
},
cardtitle: {
flex: 1,
fontSize: 16,
fontWeight: 'bold',
},
cardtext: {
flex: 1,
justifyContent: 'center',
alignItems: 'flex-end',
},
textdate: {
color: '#5e5e71',
},
texthour: {
color: '#5e5e71',
},
});
функция и стиль рендеринга из моего компонента списка:
export default class ActivityList extends React.Component {
_renderCardItem = ({ item }) => (
<CardItem
image={item.image}
title={item.title}
date={item.date}
hour={item.hour}
/>
);
_keyExtractor = item => item.id;
render() {
return (
<FlatList
data={this.props.data}
renderItem={this._renderCardItem}
contentContainerStyle={styles.cardcontainer}
keyExtractor={this._keyExtractor}
/>
);
}
}
const styles = StyleSheet.create({
cardcontainer: {
flex: 1,
overflow: 'hidden',
backgroundColor: 'white',
alignItems: 'center',
width: Dimensions.get('window').width,
borderWidth: 0,
},
});
мои данные имеют все уникальные идентификаторы, заголовок, дату, час.
Прочтите все доступные руководства и документы и не найдете решения.