javascript - React Native Text inside ImageBackground wrapper is not displaying (With Image)

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

标签： javascriptcssreactjsreact-nativereact-redux

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'}