React Native开发Android应用时文本添加阴影后无法正常显示问题求助

核心原因 #

React Native 中shadowColor、shadowOffset、shadowOpacity等带shadow*前缀的属性是iOS端View组件的专属属性，既不兼容Android平台，也无法作用于Text组件。

修复方法 #

Text组件的跨平台阴影统一使用带textShadow*前缀的属性实现，Android端从React Native 0.57版本开始原生支持该系列属性，无需额外配置。
修改后的样式代码如下：

const styles = StyleSheet.create({
  viewStyle:{
    backgroundColor:'pink',
    justifyContent:'center',
    alignItems:'center',
    height:60,
  },
  textStyle:{
    fontSize:20,
    // 双端通用文本阴影配置
    textShadowColor: 'rgba(0, 0, 0, 0.2)',
    textShadowOffset: {width: 10, height: 10},
    textShadowRadius: 0 // 调整数值可修改阴影模糊程度，数值越大阴影越柔和
  }
});

注意事项 #

• 阴影透明度建议直接写在textShadowColor的rgba值中，兼容性优于单独配置textShadowOpacity
• 若使用0.57以下版本的React Native，可通过给Text外层嵌套View并设置elevation属性实现近似阴影效果，也可引入第三方阴影库完成需求。

内容的提问来源于stack exchange，提问作者Khushi