无法将View放在图表上

Question

我正在尝试在View前面添加自定义SmoothLine，但Smoothline正在View或Smoothline下方移动是 - 我不确定，但似乎是 - 重叠View。

我正在使用react-native-pathjs-charts来生成图表。

以下是当前的代码段及其结果：

  <View style={styles.viewStyle}>
    <View style={styles.contentViewStyle}>
      <Text style={styles.bigNumberStyle}>2.202.122 €</Text>
      <Text style={styles.typeStyle}>UMSATZ</Text>
    </View>
    <SmoothLine data={data} options={options} xKey="x" yKey="y" />
  </View>

导致： 当我作为孩子在View内移动Smoothline时，会发生以下情况：

 <View style={styles.viewStyle}>
        <SmoothLine data={data} options={options} xKey="x" yKey="y">
          <View style={styles.contentViewStyle}>
            <Text style={styles.bigNumberStyle}>2.202.122 €</Text>
            <Text style={styles.typeStyle}>UMSATZ</Text>
          </View>
        </SmoothLine>
      </View>

有没有办法让View与图表重叠？

PS：如果没有react-native-overlay可能会很好。

Answer 1

添加position: 'absolute'应该有用。有关详细信息，请参阅docs#position。

来自文档：

React Native中的

position与常规CSS类似，但默认情况下所有内容都设置为relative，因此absolute定位始终只是相对于父级。

如果您想使用相对于其父级的特定数量的逻辑像素来定位孩子，请将孩子设置为具有绝对位置。

使用absoluteFillObject：

您还可以使用我从Today I Learned了解到的这个方便的快捷方式：

const styles = StyleSheet.create({
  backgroundImage: {
    ...StyleSheet.absoluteFillObject,
  },
})

而不是：

const styles = StyleSheet.create({
  backgroundImage: {
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
  },
})