如何为React Native

Question

是否可以将Text的颜色设置为透明，让文本单独继承父视图背景颜色，而不是它自己的背景颜色！

<View style={{ backgroundColor: 'red' }}>
  <Text style={{ color: 'transparent',  backgroundColor: 'blue' }}>
    Change text colour progressively
  </Text>
</View>

当前行为

由于文字颜色是透明的，因此它会继承自己的背景颜色（蓝色），因此不会显示任何文字。

预期行为

仅文本需要继承父视图的背景颜色（红色）。

我的最终目标是实现动画，其中文本颜色可以逐步改变。我不确定网络中的行为或任何行为，只是好奇是否有可能实现这一点。

定位动画：

谢谢。

Answer 1

您可以尝试实现以下代码：

<View style={{ backgroundColor: 'red' }}>
<View style={{ color: 'transparent' }}>
  <Text style={{ backgroundColor: 'blue' }}> Change text colour progressively </Text>
</View>
</View>

Answer 2

render() {
    const bgColor = 'red'; // try updating this color
    return(
       <View style={{backgroundColor: bgColor, padding: 15}}>
           <View style={{backgroundColor: 'blue', padding: 10}}>
                <Text style={{color: bgColor, fontSize: 18}}>
                    Change text color progressively
                </Text>
           </View>
       </View>
    );
}

实时操作中的代码=＆gt; https://snack.expo.io/HyZapc3qG