css - 我们如何在 react-native 中设计箭头卡
问题描述
我正在开发一个示例应用程序,在此应用程序中需要使用箭头卡,它用于提供显示卡。我尝试了基于 react-native 形状,但我没有得到输出。
假设如果提供的文本自动增加,箭头设计形状也会增加
这是我的代码:
<View style={styles.container}>
<View style={{ flex: 0.1, backgroundColor: "blue" }} />
<View
style={{
flex: 0.9,
backgroundColor: "green",
justifyContent: "center",
alignItems: "center"
}}
>
<View style={styles.baseTop} />
<View style={styles.baseBottom} />
</View>
</View>
baseTop: {
borderBottomWidth: 35,
borderBottomColor: "red",
borderLeftWidth: 50,
borderLeftColor: "transparent",
borderRightWidth: 50,
borderRightColor: "transparent",
height: 0,
width: 0,
left: 0,
top: -35,
position: "absolute"
},
baseBottom: {
backgroundColor: "red",
height: 55,
width: 100
}
我需要像这种类型的图像,这里引用图像:
解决方案
这就是我实现与您的图像几乎相同的方式。
import React, { Component } from 'react';
import { Text, View,StyleSheet } from "react-native";
export default class App extends Component {
render() {
return (
<View style={{flex:1}}>
<View
style={styles.wrapper}>
<View style={styles.rectangle}><Text>6</Text> <Text>tens</Text> </View>
<View style={styles.rectangle}><Text>6</Text> <Text>ones</Text> </View>>
<View style={styles.triangle}></View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
wrapper: {
flexDirection: "row",
justifyContent: "flex-start",
flex: 0.2,
alignItems: "center",
paddingLeft: 29,
paddingTop: 0,
marginTop: 0
},
rectangle: {
width: 50,
backgroundColor: "yellow",
margin: 0,
justifyContent: "center",
alignItems: "center",
height: 52,
borderColor:"black"
},
triangle: {
width: 0,
height: 0,
backgroundColor: 'transparent',
borderStyle: 'solid',
borderLeftWidth: 27,
borderRightWidth: 27,
borderBottomWidth: 43,
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderBottomColor:"yellow",
transform: [
{ rotate: '90deg' }
],
margin: 0,
marginLeft: -6,
borderWidth: 0,
borderColor:"black"
}
});
推荐阅读
- java - 如果由 maven-assembly-plugin 构建,则附加主要工件
- android - 外部Sqlite数据库,无法插入数据库,android studio
- sql - 选择数字组合与整数 SQL 的一部分匹配的位置
- ios - 如何在 Swift 中创建延迟实际应用程序加载时间的自定义启动屏幕?
- swift - Swift UITableView AccessoryType(复选标记)
- reactjs - 成功部署 Firebase 后的空白页面
- php - 如何在 php 中找到嵌套 foreach 循环的迭代
- react-native - React Navigation:使用自定义导航器时,“无法将没有 YogaNode 的子代添加到没有测量功能的父代”
- python - 如何使用python win32在outlook中更改发送邮件的地址
- ios - NSLocationWhenInUseUsageDescription 错误继续显示