反應不顯示ImageBackground包裝器內的本機文本（帶有圖像）

Question

將imageStyle位置設置為相對時，不會顯示imagebackground包裝器中的文本。

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

文字應該在圖片內，例如

Answer 1

默認情況下， ImageBackground帶有absoluteFill樣式。

通過將position: 'relative'設置為相對於 此處定義的視圖容器的image styles 。 因此，子元素將始終位於ImageBackground

解決方法是刪除樣式中的position: 'relative' ，並使用父容器style對象。

作為ImageBackground styles={'//...View container styles'}