Я не знаю, почему у моей карты не полная ширина, используя FlatList
Мой ток:
Что у меня sh карта должна быть полной ширины
и вот мой код
return (
<View style={styles.container}>
<View>
<Text style={{fontWeight: 'bold', fontSize: 20}}>Cateogories:</Text>
<FlatGrid
itemDimension={90}
items={items}
style={styles.gridView}
renderItem={({item, index}) => (
<TouchableOpacity>
<View
style={[styles.itemContainer, {backgroundColor: item.code}]}>
<Text style={styles.itemName}>{item.name}</Text>
<Image style={styles.iconSize} source={item.picture} />
</View>
</TouchableOpacity>
)}
/>
</View>
<FlatList
data={DATA}
showsHorizontalScrollIndicator={false}
horizontal={false}
keyExtractor={item => item.id}
renderItem={({item}) => {
return (
<List>
<ListItem noBorder style={{flex: 1}}>
<View style={{flex: 1}}>
<Card style={{flex: 1}}>
<CardItem style={{flex: 1}}>
<Left>
<Thumbnail
source={{
uri:
'https://www.foodbusinessafrica.com/wp-content/uploads/2019/04/milled-rice.jpg',
}}
/>
<Body>
<Text>NativeBase</Text>
<Text note>GeekyAnts</Text>
</Body>
</Left>
</CardItem>
<CardItem cardBody>
<Image
source={{
uri:
'https://www.foodbusinessafrica.com/wp-content/uploads/2019/04/milled-rice.jpg',
}}
style={{height: 200, width: null, flex: 1}}
/>
</CardItem>
<CardItem>
<Left>
<Button transparent>
<Icon active name="thumbs-up" />
<Text>12 Likes</Text>
</Button>
</Left>
<Body>
<Button transparent>
<Icon active name="chatbubbles" />
<Text>4 Comments</Text>
</Button>
</Body>
<Right>
<Text>11h ago</Text>
</Right>
</CardItem>
</Card>
</View>
</ListItem>
</List>
);
}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
title: {
alignSelf: 'flex-end',
color: '#638A37',
fontSize: 15,
},
rowItem: {
flexDirection: 'row',
},
itemContainer: {
borderRadius: 10,
padding: 10,
height: 128,
borderWidth: 1,
borderColor: '#ddd',
borderBottomWidth: 0,
shadowColor: '#000',
shadowOffset: {width: 0, height: 5},
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 10,
marginLeft: 5,
marginRight: 5,
marginTop: 10,
},
itemName: {
// color: '#5E782F',
fontSize: 22,
},
iconSize: {
alignSelf: 'flex-end',
marginTop: 27,
paddingLeft: 20,
width: 56,
height: 56,
},
});