Question

我在React native的基础上使用了Native基本组件，我想知道如何在UI中将卡片变成圆形而不是矩形。为此有一个圆形的支撑物吗？

Answer 1

好吧，实际上没有人能回答这个问题，但是幸运的是，我在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 >
    );
  }
}

谢谢akhil-geekyants !!!! Here是原始帖子的链接

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

Answer 2

正确的方法是<Card borderRadius={50}>。

来源：https://github.com/GeekyAnts/NativeBase/issues/1845#issuecomment-409624785

如何在本机，本机基础中使卡片变圆

2 个答案: