我不知道为什么使用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,
  },
});

#1楼 票数:0

尝试在标签中添加width:100

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

或使用marginLeft:0,marginRight:0

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

#2楼 票数:0

全角卡片视图工具:

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>

  ask by Seak_Ny translate from so

未解决问题?本站智能推荐:

2回复

React-Native按钮对齐中心

我正在使用本机基本按钮我想将按钮对齐在屏幕中央我试过这个: 但它减少了输入字段的大小,我得到的结果如下:
2回复

Listitem的React-Native获取键

所以我试图获取一个ListItem的关键字,该关键字是在循环中生成的,但是我得到了一个未定义的值。 如果有人可以帮助我吗?
1回复

在Web上显示React-Native组件的工具

我有一个使用Metro和Native Base构建的React-native项目,我正在尝试通过从中提取样式指南来标准化UI。 我希望将其记录下来,以便与设计师共享并共同工作。 干杯! 我已经尝试过Storybook , Docz和React-Styleguidist 。 Reac
1回复

获取react-native中的复选框值

我正在使用基于本机的模块的Checkbox,并尝试访问checkbox的值,但没有得到。如何访问该值? 任何人都可以帮助我获取复选框值,我是React-native的新手。 码:
1回复

如何在React-native中更改样式的可滚动标签

我在项目中使用Native-Bae,并且已经为可滚动标签添加了这些样式元素,但是并没有根据需要更改颜色。 这是我的代码。 它显示默认的蓝色,而我需要将下划线颜色,活动文本颜色更改为绿色,将非活动文本颜色更改为灰色。
1回复

React-Native—导航器未呈现initialRoute

在自学React-Native的过程中。 构建零售iOS网站的模型,该模型从Firebase提取数据,并遇到尝试合并Navigator的障碍。 我的应用程序来自“ index.ios.js> MainLayout>路由> HomeIndex”。 这些组件如下: Mai
2回复

React-Native:在一个View组件中将两个文本组件居中

我想在他们的组件到中心两个独立的文本,我使用的react-native和native-base 。 我无法在Text组件本身中垂直和水平居中放置文本。 我分为几种颜色,以图形方式查看问题。 要素: 样式: 您看到的是我所做的所有测试。 当然,这很愚蠢,但我尚未解决,您有什么想法
1回复

React-Native:本机基础:失败的道具类型:无效的props.style键“NativeBase”提供给“视图”

版: 反应:16.3.1 反应本机:〜0.55.2 本机基础:^ 2.8.0 问题:警告:道具类型失败:提供给“视图”的props.style关键字“ NativeBase”无效 平台:iOS和Android 每当我将本机基础集成到项目时,我都会在react-native