反应不显示ImageBackground包装器内的本机文本（带有图像）

Question

The text in my imagebackground wrapper is not displayed when I set imageStyle position to relative.

    <TouchableWithoutFeedback style={{ position: 'relative', flex: 1, justifyContent: 'center' }} delayPressIn={500} onPressIn={() => this.onPressInMic()} onPressOut={() => this.onPressOutMic()}>
      <ImageBackground imageStyle={{ position: 'relative', backgroundColor: 'transparent' }} source={this.state.micOn ? Images.micOn : Images.micOff} >
        {
          this.state.micOn
            ? (
              <Text style={styles.micText}>PRESS TO{'\n'}STOP</Text>)
            : (
              <Text style={styles.micText}>PRESS TO{'\n'}RECORD</Text>
            )
        }
      </ImageBackground>
    </TouchableWithoutFeedback>

The text is supposed to be inside the image like

Answer 1

By default ImageBackground comes with absoluteFill style.

By setting position: 'relative' , to the image styles you're making it relative to the view container as defined here . Therefore the children elements will always come below the ImageBackground

The workaround would be to remove the position: 'relative' in the styles and use parent container style object.

as ImageBackground styles={'//...View container styles'}