javascript - ImageBackground 包装器内的 React Native Text 未显示(带图像)

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

默认 ImageBackground 带有 absoluteFill 样式。

通过将 position: 'relative' 设置为 image styles，您使其相对于 View 容器 定义为 here。因此，子元素将始终位于 ImageBackground

下方

解决方法是删除样式中的 position: 'relative' 并使用父容器 style 对象。

as ImageBackground styles={'//...查看容器样式'}