在左上角的视图上反应原生视图？

Posted 2023-03-05

【中文标题】在左上角的视图上反应原生视图？

【英文标题】：react native view over a view in top left corner?

【发布时间】：2021-10-10 07:59:31

【问题描述】：

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

<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>

【参考方案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>

【讨论】：

您也可以添加 zIndex 以确保它始终位于顶部

@BloodyMonkey 我用你的代码创建了一个零食。高级文本视图容器位于图像视图之外，请您查看此小吃以供参考。你能帮我解决这个问题吗？ snack.expo.dev/PNat193oQ

感谢血猴的帮助。我找到了答案。我为你投了赞成票。谢谢

【参考方案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,
  ,
);

【讨论】：

snack.expo.dev/@cihanbs/rotate-top-left-corner你可以在零食上测试一下

如果我将主容器的图像视图宽度更改为 '80%' 和 alignItems: 'center'，则会出现高级包装器的完整视图。我不需要隐藏那个侧视图请看这个更新的小吃snack.expo.dev/Nr5-wT86L

我修正了你可以测试它？