react-native - 如何在 native react 、 native 基础中使卡片呈圆形-6ren

react-native - 如何在 native react 、 native 基础中使卡片呈圆形

转载作者：行者123 更新时间：2023-12-02 20:11:23

31

4

我在 native react 之上使用 native 基础组件，我想知道如何在 UI 中使卡片呈圆形而不是矩形。有圆形的 Prop 吗？

最佳答案

好吧，实际上没有人能回答这个问题，但幸运的是我在 github 上发现了这个:

import React, { Component } from "react";
import { Container, Header, Title, Content, Button, Icon, Card, CardItem, Text, Body, Left, Right, IconNB, View } from "native-base";
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      loading: true
     };
  }
  static navigationOptions = {
    header:null
  };

  async componentWillMount() {
    await Expo.Font.loadAsync({
      Roboto: require("native-base/Fonts/Roboto.ttf"),
      Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
      Ionicons: require("@expo/vector-icons/fonts/Ionicons.ttf"),
    });
    this.setState({ loading: false });
  }
  render() {
    if (this.state.loading) {
      return <Expo.AppLoading />;
    }
    else
    return (
      <Container>
        <Header>
          <Left>
            <Button transparent>
              <Icon name="arrow-back" />
            </Button>
          </Left>
          <Body>
            <Title>Header</Title>
          </Body>
          <Right />
        </Header>
        <Content padder>
          <Card style={{ borderRadius: 8 }}>
            <CardItem header bordered style={{ borderTopLeftRadius: 8, borderTopRightRadius: 8 }}>
              <Text>NativeBase</Text>
            </CardItem>
            <CardItem bordered>
              <Body>
                <Text>
                  NativeBase is a free and open source framework that enable
                  developers to build
                  high-quality mobile apps using React Native iOS and Android
                  apps
                  with a fusion of ES6.
                </Text>
              </Body>
            </CardItem>
            <CardItem bordered>
              <Body>
                <Text>
          NativeBase builds a layer on top of React Native that provides
                  you with
                  basic set of components for mobile application development.
                </Text>
              </Body>
            </CardItem>
            <CardItem bordered>
              <Body>
                <Text>
                  Get on the mobile fast track with NativeBase, the
                  fastest-growing platform
                  and tool set for iOS and Android development.
                </Text>
              </Body>
            </CardItem>
            <CardItem footer bordered style={{ borderBottomLeftRadius: 8, borderBottomRightRadius: 8 }}>
              <Text>GeekyAnts</Text>
            </CardItem>
          </Card>
        </Content>
      </Container >
    );
  }
}

谢谢阿基尔极客!!!! Here是原始帖子的链接

Here是另一个与圆角卡片背景图像相关的链接

关于react-native - 如何在 native react 、 native 基础中使卡片呈圆形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53551511/

31

4

0

文章推荐： dns - 组合多个 SPF 记录，如何决定应该使用什么限定符？

文章推荐： python - 在 numpy 数组上使用两个索引数组

文章推荐： python - Keras 中 sigmoid 激活函数的使用

vue3快速入门系列——基础
vue3 快速入门系列 - 基础前面我们已经用 vue2 和 react 做过开发了。从 vue2 升级到 vue3 成本较大，特别是较大的项目。所以许多公司对旧项目继续使用vue2，新项目则
C# 基础
C# 基础 C#项目创建这里注意win10虚拟机需要更新下补丁，不然直接下载visual studio 2022会显示版本不支持 HelloWorld C#的类文件都是以.cs结尾，入口方法为sta
iPhone内存管理(基础)
关于 iPhone 内存管理的非常基本的问题: 假设我有一个 viewController，其中有几个 subview 也由 viewController 控制。当我删除顶部 viewControll
C指针处理(基础)
我仍在努力适应指针。不是概念——我理解内存位置、匹配可变长度的指针增量等——这是语法。这是一个我认为是我感到困惑/无法直观把握的原因之一: int a = 42; 在一个int大小的内存空间中分配并放
Kafka-基础
1. 简介 Kafka（Apache Kafka）是一种分布式流数据平台，最初由LinkedIn开发，并于后来捐赠给Apache软件基金会，成为了一个Apache顶级项目。它被设计用于处理大规
学习mysql之后的一点总结(基础)
1.想要在命令提示符下操作mysql服务器，添加系统变量。（计算机-系统属性——环境变量——path） 2.查询数据表中的数据； select selection_lis
MySQL数据库 ---MySQL表的增删改查(基础)
MySQL表的增删改查(基础) 1. CRUD 注释：在SQL中可以使用“–空格+描述”来表示注释说明 CRUD 即增加(Create)、查询(Retrieve)、更新(Update)、删除(Dele
javascript - 基础 - 在关闭另一个模式时打开一个模式
我有一个网页，可以在加载时打开显示模式，在这个模式中，我有一个可以打开第二个模式的链接。当第二个模式关闭时(通过单击关闭按钮或单击模式外部)，我想重新打开第一个模式。对于关闭按钮，我可以通过向具有
ios - 核心数据提取属性 - 基础
使用 Core Data Fetched Properties，我如何执行这个简单的请求: 我希望获取的属性 ( myFetchProp ) 存储 StoreA ，它应该这样做: [myFetchPr
ios - 核心基础vs基础或核心基础+基础
关闭。这个问题是opinion-based .它目前不接受答案。想改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 8年前关闭。 Improve this
drupal - 开发Drupal网站的前端-基础
最近，我得到了一个现有的Drupal项目，并被要求改进前端(HTML，JavaScript，CSS)。我在Django，PHP，Ruby等方面具有大量的前端和后端开发经验，但是我没有任何Drupal经
Java 扫描器类 - 基础
我试图让我的用户通过使用扫描仪类来决定要做什么，但我有一个问题，代码一旦运行就不会激活，并且它不会让我跳过任何行。我的代码如下所示: Scanner input = new Scanner(S
Java [基础] 对象问题
对模糊的标题表示歉意，因为我想不出这个名字是什么。基本上创建一个计算学生财务付款的小程序。当我运行它时，它计算对象限额没有问题。然而，无论我尝试什么，对象“助学金”似乎除了 0 之外什么也没有提出。
C 基础 - 被调用的对象不是函数或函数指针
这是我的代码 - main() { double x; double y = pow(((1/3 + sin(x/2))(pow(x, 3) + 3)), 1/3); prin
javascript - 基础 - 变量引用
如果我的术语在这个问题上有误，我们深表歉意。采取以下功能: i = 1; v = i * 2; for (j = 0; j < 4; j++ ) { console.log(v);
Android 基础 - 不同的类文件
我的应用程序中有不同的类文件。我有 5 个类，其中 2 个是 Activity ，1 个是运行的服务。其他 2 个只是类。这两个类中变量的生命周期是多少。我知道一个 Activity 可以被操作系统杀
Java 基础 - 实现在哪里进行？
例如，一个方法返回一个 List 类型的对象。 public List bojangles () ... 一些代码调用方法FooBar.bojangles.iterator(); 我是 Java 的新
css - 网格问题 - 基础
我遇到了一个奇怪的问题，网格的大小不适合我的屏幕。当我使用 12 列大时，它只占据屏幕的 1/3 的中间，请参见图像。我不确定是什么导致了这个问题。我没有任何会导致这种情况发生的奇怪 CSS。我不会在
C++ 头文件(基础)
我尝试使用头文件和源文件，但遇到了问题。因此，我对我正在尝试做的事情做了一个简化版本，我在 CodeBlocks 中遇到了同样的错误(undefined reference to add(double
css - (基础)带有背景图像的网格单元格突破
我正在为我的网格系统使用基础，但这在任何网格系统中都可能是一个问题。我基本上用一个容器包裹了 3 个单元格，但其中一个单元格应该长到页面边框(留在我的 Sampe-Image 中)但这也可能在右侧)。

首页

博学

6Ren·AI

商城

react-native - 如何在 native react 、 native 基础中使卡片呈圆形