透明与世博本土互动

Question

我在React Native Expo中的视图透明度有问题，在视图中我有文本，但在iphone设备和机器人上看不到，文本是透明的，但这不是我想要的。

代码：

<View style= {{paddingHorizontal:30, borderRadius:1, marginTop:5}}>
<View style={{alpha = 1.0, alignItems:'center', borderRadius:10, backgroundColor: 'white', alignContent:'center', paddingVertical:10}}>
<Text style={{fontSize:15, color:'white', fontWeight: 'bold'}}>Iniciar Sesión</Text>
</View>
</View>

我想做的事：在此处输入图像描述

我得到的：在此处输入图像描述

Answer 1

样式上的alpha应用于整个视图，因此也会导致所有子组件变得透明。您希望仅将alpha应用于父视图的背景色。在react native中，您可以通过定义背景颜色rgba格式来实现这一点

可以找到彩色文档https://reactnative.dev/docs/colors

这里有一份世博会小吃来展示这种行为。https://snack.expo.io/sl8VafHil