在 React Native iOS 中的图像顶部渲染具有透明背景的文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29300732/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Render text box with transparent background on top of image in React Native iOS
提问by Stefan Wallin
I'm trying to render a block with white text on top of an image in my testing of React Native. But instead i get a black block on top of my image with white text in it. Not what I had expected. How do you render a text block with transparent background?
在我的 React Native 测试中，我试图在图像顶部渲染一个带有白色文本的块。但相反，我在我的图像顶部有一个黑色块，里面有白色文本。不是我所期望的。如何渲染具有透明背景的文本块？
Current result
当前结果
Render function
渲染功能
render: function(){
return (
<View style={styles.container}>
<Image
style={styles.backdrop}
source={{uri: 'https://unsplash.com/photos/JWiMShWiF14/download'}}>
<Text style={styles.headline}>Headline</Text>
</Image>
</View>
);
)
Stylesheet function
样式表函数
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
backgroundColor: '#000000',
width: 320
},
backdrop: {
paddingTop: 60,
width: 320,
height: 120
},
headline: {
fontSize: 20,
textAlign: 'center',
backgroundColor: 'rgba(0,0,0,0)',
color: 'white'
}
});
回答by Stefan Wallin
PLEASE NOTE: This answer is now vastly out of date. This was applicable the day React Native was open sourced back in 2015. Today this way of doing this is deprecated.
请注意：这个答案现在已经过时了。这适用于 2015 年 React Native 开源的那一天。今天这种方式已被弃用。
You can accomplish this by adding a Viewinside the Imagelike so:
您可以通过在View内部添加Image类似的内容来完成此操作：
render: function(){
return (
<View style={styles.container}>
<Image
style={styles.backdrop}
source={{uri: 'https://unsplash.com/photos/JWiMShWiF14/download'}}>
<View style={styles.backdropView}>
<Text style={styles.headline}>Headline</Text>
</View>
</Image>
</View>
);
)
Stylesheet function
样式表函数
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
backgroundColor: '#000000',
width: 320
},
backdrop: {
paddingTop: 60,
width: 320,
height: 120
},
backdropView: {
height: 120,
width: 320,
backgroundColor: 'rgba(0,0,0,0)',
},
headline: {
fontSize: 20,
textAlign: 'center',
backgroundColor: 'rgba(0,0,0,0)',
color: 'white'
}
});
回答by user632905
backgroundColor: 'transparent'This actually is a performance optimization and it is rather aggressive.
backgroundColor: 'transparent'这实际上是一种性能优化，而且相当激进。
"< Text >elements inherit the background color of their parent < View >but this behavior causes more annoyance that helps in my opinion. A simple example is an < Image >with nested < Text >. The text nodes will take the background color or the parent views instead and will hide the image. Then we have to set backgroundColor: 'transparent'on the text nodes to fix it.
" < Text >元素继承了它们的父元素< View >的背景色，但这种行为会引起更多的烦恼，在我看来这很有帮助。一个简单的例子是带有嵌套< Text >的< Image >。文本节点将采用背景色或代替父视图并将隐藏图像。然后我们必须在文本节点上设置backgroundColor: 'transparent'来修复它。
This behavior also doesn't happen on Android, the < Text >nodes always have a transparent background by default. This causes a few surprises when developing something on Android then testing it on iOS." - https://github.com/janicduplessis
此行为在 Android 上也不会发生，默认情况下< Text >节点始终具有透明背景。在 Android 上开发某些东西然后在 iOS 上进行测试时，这会引起一些意外。” - https://github.com/janicduplessis
This is from a discussion where users raised it as an issue. Read it more here - https://github.com/facebook/react-native/issues/7964
这是来自用户将其作为问题提出的讨论。在这里阅读更多 - https://github.com/facebook/react-native/issues/7964
The easiest way like Colin said above is to set the backgroundColorof the container to rgba(0,0,0,0)
像上面说的 Colin 最简单的方法是将容器的backgroundColor设置为rgba(0,0,0,0)
回答by Colin Ramsay
Internally, I see that React Native does translate alpha values and the special case of transparentinto the correct UIColor with alpha values, so that aspect of this is working and it's easy to validate this experimentally.
在内部，我看到 React Native 确实将 alpha 值和 的特殊情况transparent转换为具有 alpha 值的正确 UIColor，因此这方面的工作是有效的，并且很容易通过实验验证这一点。
Notice that if you set the backgroundColorof your container to transparent(or rgba(0,0,0,0)), you also get a transparent text block - that knowledge should help you work around this problem. However I think it's possible to interpret this as a bug since that's not the behaviour one would expect, it feels like some kind of stacking problem.
请注意，如果您将backgroundColor容器的设置为transparent(或rgba(0,0,0,0))，您还会获得一个透明的文本块 - 该知识应该可以帮助您解决此问题。但是，我认为可以将其解释为错误，因为这不是人们所期望的行为，感觉像是某种堆叠问题。
回答by af__
I just ran into the same problem. Try removing backgroundColor: '#000000',from your container styles. Not sure why, but the background colour of the top-level component seems to be used in this case.
我刚刚遇到了同样的问题。尝试backgroundColor: '#000000',从您的容器样式中删除。不知道为什么，但在这种情况下似乎使用了顶级组件的背景颜色。
