CSS Vue/RN 背景使用opacity，文字在背景上显示

Vue 

 <div class="training_project_tip">

       <div class="tip">展示的文字</div>

 </div>

.training_project_tip {

      font-size: 12px;

      font-weight: 400;

      text-align: left;

      color: #ffffff;

      margin-top: 8px;

      position: relative;

      display: flex;

      border-radius: 6px;

      padding: 6px 8px;

  }

    .training_project_tip::before {

      content: "";

      position: absolute;

      top: 0;

      left: 0;

      right: 0;

      bottom: 0;

      background: #ffffff;

      opacity: 0.15;

      border-radius: 6px;

   }

RN

<View style={style.content}>

          <View style={style.projectTip}>

            <View style={style.tipBackground} />

            <View style={style.iconContainer}>

              <IconFont name={'cache_hint'} color={'#fff'} size={12} />

            </View>

            <View style={style.tip}>

              <Text style={style.tipName}>

                {$t('pc_train_not_allow_tip')}

              </Text>

            </View>

          </View>

        </View>

const style= StyleSheet.create({

  content: {

    paddingHorizontal: 16,

    color: Colors.white

  },

  projectTip: {

    flexDirection: 'row',

    alignItems: 'center',

    marginTop: 8,

    paddingVertical: 6,

    paddingHorizontal: 8,

  },

  tipBackground: {

    ...StyleSheet.absoluteFillObject,

    backgroundColor: '#ffffff',

    opacity: 0.15,

    borderRadius: 6

  },

  iconContainer: {

    zIndex: 1

  },

  tip: {

    marginLeft: 4

  },

  tipName: {

    color: '#fff',

    fontSize: 12,

    fontWeight: 'bold'

  }

})