Блог

Здравствуйте,

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

Вот код, который у меня есть в настоящее время :

     <View style={styles.card_template}>
      <Image
        style={styles.card_image}
        source={{uri: 'https://i.picsum.photos/id/881/700/700.jpg?hmac=-JqTJ4_Ped2jYmjiaDgYZOAGzvC0CybCKbROT3GJgZc'}}
    />
      <Text style={styles.card_title}>Some Text</Text>
   </View>

  card_template:{
    flex: 1,
    width: 250,
    height: 250
  },
  card_image: {
    width: 250,
    height: 250,
    borderRadius : 10
  },
  card_title: {
    position: 'absolute',
    left: 0,
    top: 250
  }

  

Заранее благодарю.

Вот полный пример:

 import * as React from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <View style={styles.container}>
     <View style={styles.card_template}>
      <Image 
        
        style={styles.card_image}
        source={{uri: 'https://i.picsum.photos/id/881/700/700.jpg?hmac=-JqTJ4_Ped2jYmjiaDgYZOAGzvC0CybCKbROT3GJgZc'}}
    />
    <View style={styles.text_container}>
      <Text style={styles.card_title}>Some Textt</Text>
    </View>
   </View>
   </View>
  );
}

const styles = StyleSheet.create({
  container:{
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  card_template:{
    width: 250,
    height: 250,
    boxShadow: "10px 10px 17px -12px rgba(0,0,0,0.75)"
  },
  card_image: {
    width: 250,
    height: 250,
    borderRadius : 10
  },
  text_container:{
    position: "absolute",
    width: 250,
    height: 30,
    bottom:0,
    padding: 5,
    backgroundColor: "rgba(0,0,0, 0.3)",
    borderBottomLeftRadius : 10,
    borderBottomRightRadius: 10
  },
  card_title: {
     color: "white",

  }
});

  

Живая демонстрация

Вывод: