如何使用 Flatlist react-native 全宽卡片

Question

我不知道为什么使用FlatList我的卡片不是全宽

我的当前：

我希望卡片应该是全宽的

这是我的代码

    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,
  },
});

Answer 1

尝试在标签中添加width:100

<Card style={{flex: 1, width: 100}}/>

或使用marginLeft:0,marginRight:0

<Card style={{flex: 1, marginLeft: 0, marginRight: 0}}/>

Answer 2

全角卡片视图工具：

import 'react-native-gesture-handler';
import React from 'react';
import {Dimensions} from 'react-native';
import {Card} from 'react-native-elements';

const FullWidthCard = ({
  gap = {horizontal: 0},
  borderRadius = {topLeft: 0, topRight: 0},
  children,
}) => {
  return (
    <Card
      containerStyle={{
        width: Dimensions.get('window').width - gap.horizontal,
        borderTopLeftRadius: borderRadius.topLeft,
        borderTopRightRadius: borderRadius.topRight,
        children,
      }}>
      {children}
    </Card>
  );
};

export {FullWidthCard};

来自 UI 组件：

 <FullWidthCard
          gap={{horizontal: 0}}
          borderRadius={{topLeft: 50, topRight: 50}}>
          <ProfileContent navigation={navigation}></ProfileContent>
        </FullWidthCard>

如何使用 Flatlist react-native 全宽卡片

问题描述

2 个解决方案

解决方案1
0 2020-02-21 13:17:01

解决方案2
0 2021-03-04 06:18:38

如何使用 Flatlist react-native 全宽卡片

问题描述

2 个解决方案

解决方案1 0 2020-02-21 13:17:01

解决方案2 0 2021-03-04 06:18:38

解决方案1
0 2020-02-21 13:17:01

解决方案2
0 2021-03-04 06:18:38