Как сделать карточку округлой формы в реакции родной, родной базы - PullRequest
Новая
       35

Как сделать карточку округлой формы в реакции родной, родной базы

0 голосов
/ 30 ноября 2018

Я использую исходные базовые компоненты поверх реагирующих нативных, и мне было интересно, как сделать так, чтобы карты были круглыми, а не прямоугольными в пользовательском интерфейсе.Для этого есть закругленная опора?

1 Ответ

0 голосов
/ 30 ноября 2018

Ну, на самом деле никто не мог ответить на это, но как-то, к счастью, на 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 >
    );
  }
}

Спасибо, ахил-гикьянц !!!! Здесь - ссылка на исходное сообщение

Здесь - еще одна ссылка, относящаяся к изображению в качестве фона на карточке со скругленными углами

...