import { Image } from 'react-native';
import {
Container, Header, Title, Content, Footer,
FooterTab, Button, Left, Right, Body, Icon, Text,
Accordion, Card, CardItem, Thumbnail
} from 'native-base';
export default function App() {
return (
<Container>
<Header>
<Body>
<Title>Card</Title>
</Body>
</Header>
<Content>
<Card style={{ flex: 0 }}>
<CardItem bordered>
<Left>
<Thumbnail source={require('./image/thumbnail.png')} />
<Body>
<Text>NativeBase</Text>
<Text note>Jan 19, 2020</Text>
</Body>
</Left>
</CardItem>
<CardItem bordered>
<Body style={{ alignItems: 'center' }}>
<Image
source={{ uri: 'https://c-5uwzmx78pmca90x24quo-a-uav-kwux2eisiuiqhmlx2evmb.g01.msn.com/g00/3_c-5eee.uav.kwu_/c-5UWZMXPMCA90x24pbbx78ax3ax2fx2fquo-a-uav-kwu.isiuiqhml.vmbx2fbmvivbx2fiux78x2fmvbqbgqlx2fIIQXMAU.quox3fpx3d527x26ex3d9901x26ux3d4x26yx3d48x26cx3dbx26wx3dnx26tx3dnx26q98k.uizsx3dquiom_$/$/$/$/$' }}
style={{ height: 200, width: 200, flex: 1 }} />
<Text>
Card Showcase is further customization of Card Image. It uses several different items.
Begins with the Card List component, which is similar to our List Avatar.
Make use of Left, Body and Right components to align the content of your Card header.
To mixup Image with other NativeBase components in a single CardItem, include the content within Body component.
</Text>
</Body>
</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>1h ago</Text>
</Right>
</CardItem>
</Card>
</Content>
</Container>
);
}
reference:
https://facebook.github.io/react-native/docs/image
https://facebook.github.io/react-native/docs/images
https://docs.nativebase.io/Components.html#card-image-headref
No comments:
Post a Comment