ImageBackground 包装器中的 React Native Text 未显示（带图像）答案

【问题标题】：React Native Text inside ImageBackground wrapper is not displaying (With Image)ImageBackground 包装器中的 React Native Text 未显示（带图像）
【发布时间】：2018-04-29 17:21:14
【问题描述】：

当我将 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>

文本应该在图像内部，例如

【问题讨论】：

您的文字似乎隐藏在计时器下方，您可以添加相关代码来生成此问题吗？
@PritishVaidya 嗨，请查看添加的图像。文本应该在图像内

标签： javascript css reactjs react-native react-redux

【解决方案1】：

默认ImageBackground 带有absoluteFill 样式。

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

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

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

【讨论】：