Как наложить текст на изображение карты в React Native? - PullRequest
Новая
       23

Как наложить текст на изображение карты в React Native?

0 голосов
/ 24 января 2020

Я хочу добавить текст на изображение карты и хочу контролировать положение текста на изображении карты. Когда я использую featuredSubtitle = {"Helo"} , которые дают текст поверх изображения, но я не могу контролировать положение. Вот пример изображения из приложения Панда еды. Как я могу добавить Flat 50 et c на мою карту Изображение I want to achieve that Highlighted Circle

      <Card  featuredSubtitle={"Helo"} image={{uri: 'https://www.papajohns.com.pk/binary_resources/10484676'}}>
        <Text style={{ fontSize: 20,fontWeight: 'bold'}}>
          {"Papa Jhon's - Johar Town"}
        </Text>
        <Text style={{}}>
          {"$$$, Italian, Panda Picks, Thin Crust Pizza, Take Away"}
        </Text>
        <Text style={{textShadowColor: 'red', textShadowRadius: 3, textDecorationLine: 'line-through'}}>
          {"Rs: 390 | Rs: 50 Delivery"} 
        </Text>
        <Text style={{textShadowColor: '#88f549', textShadowRadius: 3,}}>
          {"Rs: 290 minimum | Free Delivery"} 
        </Text>
      </Card>

Ответы [ 3 ]

0 голосов
/ 24 января 2020

Я решаю это по позиции. Вот код 

        <Text style={{position: 'absolute', top: -150, right: 0 ,backgroundColor: '#fff', fontSize: 15}}>
          {"  35 mins "}
        </Text>
        <Text style={{ position: 'absolute', top: -130, left: 0 ,backgroundColor: '#D60E64', fontSize: 15, color: '#fff'}}>
          {"  30% OFF   "}
        </Text>
        <Text style={{ position: 'absolute', top: -100, left: 0 ,backgroundColor: '#D60E64', fontSize: 15, color: '#fff'}}>
          {"  FREE DELIVERY   "}
        </Text>
0 голосов
/ 24 января 2020

Вы можете достичь этого по абсолютной позиции. Вы специально попросили компонент карты. но этот подход работает на все взгляды. Здесь вы можете отнести это закуска . Я построил это с помощью компонента карты, используя Reaction-native-Card 

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

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Card style={{ width: '100%', height: '50%', borderRadius: 10 }}>
          <ImageBackground
            style={{
              width: '100%',
              height: '80%',
              resizeMode: 'contain',
              borderTopLeftRadius: 10,
              borderTopRightRadius: 10,
            }}
            source={{
              uri:'https://images.unsplash.com/photo-1522057306606-8d84daa75e87?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=80',
            }}
          />

          {/** top-right corner */}
          <View style={{ position: 'absolute', top: 0, right: 0 }}>
            <Text
              style={{
                fontSize: 20,
                color: 'black',
                backgroundColor: 'white',
              }}>
              35 mins
            </Text>
          </View>

          {/** top -left */}
          <View style={{ position: 'absolute', top: 10, left: 0 }}>
            <Text
              style={{ fontSize: 20, color: 'white', backgroundColor: 'red' }}>
              Flat 50%
            </Text>
          </View>
          <View style={{ position: 'absolute', top: 40, left: 0 }}>
            <Text
              style={{ fontSize: 20, color: 'white', backgroundColor: 'red' }}>
              Free delivery
            </Text>
          </View>
          {/**Card text */}
          <Text style={{ fontSize: 20, fontWeight: 'bold', paddingLeft: 8 }}>
            Papa's john town
          </Text>
          <Text />
        </Card>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});
0 голосов
/ 24 января 2020

Вы можете наложить текст, используя абсолютную позицию 

import React, { Component } from "react";
import { Text, ImageBackground } from "react-native";

class App extends Component {
  render() {
    return (
      <ImageBackground
        source={{
          uri:
            "https://www.medicalnewstoday.com/content/images/articles/325/325466/man-walking-dog.jpg"
        }}
        style={{
          height: 100,
          width: 100,
          position: "relative", // because it's parent
          top: 2,
          left: 2
        }}
      >
        <Text
          style={{
            fontWeight: "bold",
            color: "white",
            position: "absolute", // child
            bottom: 0, // position where you want
            left: 0
          }}
        >
          Hello World
        </Text>
      </ImageBackground>
    );
  }
}

export default App;
...