ImageBackground包装器中的React Native Text未显示（With Image）

Question

当我将imageStyle位置设置为relative时，我的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

默认情况下，position: 'relative'带有absoluteFill样式。

通过将image styles设置为ImageBackground，您可以将{strong>相对于视图容器定义为here。因此，子元素将始终低于position: 'relative'

解决方法是删除样式中的style并使用父容器ImageBackground styles={'//...View container styles'}对象。

为{{1}}