反应本机卡视图

Question

我想拥有与此类似的卡片视图-

这取自https://www.npmjs.com/package/react-native-material-cards

图像为全卡视图，文本信息位于包含标题文本和子文本的透明块上。我为我的项目使用了相同的库，但无法在图像上实现此透明文本块。我该怎么办？

Answer 1

不需要第三方库，您可以使用内置的React-Native组件（例如View，Image和Text）来实现此目的。

我为您创建了快速脏的示例代码：

import React, { Component } from 'react';
import { Image, Text, View } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={{ width: 200, height: 200, flexDirection: 'row', margin: 24 }}>
        <Image
          style={{ width: 200, height: 200, position: 'absolute' }}
          source={{ uri: 'https://www.dike.lib.ia.us/images/sample-1.jpg/image' }}
        />
        <View style={{ flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.5)', alignSelf: 'flex-end' }}>
          <Text style={{ color: 'white', fontSize: 20, margin: 6 }}>{'Title'}</Text>
          <Text style={{ color: 'white', margin: 6 }}>{'Subtitle'}</Text>
        </View>
      </View>
    );
  }
}

Answer 2

我已经实现了CardView来实现与海拔高度的本地化，它支持android（所有版本）和iOS。 https://github.com/Kishanjvaghela/react-native-cardview。检查一下