在左上角的视图上反应本机视图？

Question

我需要在图像视图的上角创建带有高级文本的视图，如下图所示。我没有任何线索可以做到这一点？谁能帮我实现这个目标？

<TouchableOpacity
        style={{
           width: 70,
           height: '100%',
           backgroundColor: Color.appBackgroundColor,
           marginRight: 20,
  }}
        onPress={() => this.onPressMovie(item)}>
        <Image
          style={{
            width: '100%',
           height: '100%',
  }}
          source={{uri: Environment.baseUrlForImage + item.thumbnail}}
        />
      </TouchableOpacity>

Answer 1

像这样的东西可以完成这项工作

<TouchableOpacity
    style={{
    width: 70,
    height: '100%',
    backgroundColor: Color.appBackgroundColor,
    marginRight: 20,
    }}
    onPress={() => this.onPressMovie(item)}>
    <Image
    style={{
        width: '100%',
    height: '100%',
    }}
    source={{uri: Environment.baseUrlForImage + item.thumbnail}}
    />

    <View style={{position: 'absolute', top: 100, left: -100, transform: [{rotate: "-45deg"}]}}>
        <View style={{padding: 10, width: 400, backgroundColor: "#ffa602"}}>
            <Text style={{color: 'white', textAlign: 'center'}}>Premium</Text>
        </View>
    </View>
</TouchableOpacity>

Answer 2

您可以在所有屏幕上尝试此操作

import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  ImageBackground,
  StyleSheet,
  SafeAreaView,
} from 'react-native';

const width = 200;
const height = width / 5;
const top = width / Math.sqrt(8) - height;
const left = -(width / Math.sqrt(8) - height / 2);

export default function Login() {
  return (
    <SafeAreaView style={styles.container}>
      <ImageBackground
        source={{
          uri: 'https://i.picsum.photos/id/828/200/300.jpg?hmac=YwDXceJcHQbinJfsIHJgrD8NakhtHzBMH-vD4aNcPo4',
        }}
        style={styles.poster}>
        <TouchableOpacity style={styles.premiumWrapper}>
          <Text style={styles.premiumText}>Premium</Text>
        </TouchableOpacity>
      </ImageBackground>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  poster: {
    height: '100%',
    width: '100%',
    backgroundColor: 'magenta',
  },
  premiumWrapper: {
    height: height,
    width,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffa604',
    transform: [{rotate: '-45deg'}],
    top,
    left,
  },
  premiumText: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 20,
  },
});

在左上角的视图上反应本机视图？

react native view over a view in top left corner?

image

view

alignment

react-native