React Native 文本位于对象后面

Question

大家好，我遇到了一些文本被另一个对象重叠的问题。

这里是 image 正在发生的事情。

可以看到第二行文字在白色图形的后面，请问如何让它变成白色图形的上方呢？我尝试了 z 顺序和其他各种位置，但无法解决这个问题。

此代码：

白色方块的代码：

const Square = () => {
  return <View style={styles.square} />;
};

然后是主要代码

<View style={{flex: 1, padding: 0}}>
      {isLoading ? (
        <Text>Loading...</Text>
      ) : (
        <SafeAreaView style={{flex: 1, backgroundColor: '#8af542'}}>
          <View
            style={{
              marginTop: 150,
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <Text>TEST</Text>
            <Text
              style={{
                position: 'absolute',
                top: 140,
                zIndex: 1,
                elevation: 1,
              }}>
              TEXT HERE
            </Text>
          </View>
          <View
            style={{
              flex: 1,
              justifyContent: 'flex-end',
              marginBottom: windowHeight * -0.05,
            }}>
            <Square></Square>
          </View>
        </SafeAreaView>
      )}
    </View>

然后是样式：

const styles = StyleSheet.create({
  centerItems: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  square: {
    width: windowWidth,
    height: windowHeight * 0.6,
    backgroundColor: 'white',
    flex: 1,
    justifyContent: 'flex-end',
    marginBottom: windowHeight * -0.05,
    position: 'absolute',
  },
});

Answer 1

发生这种情况是因为您设置了 TEXT HERE 视图的 zIndex，而不是您想要在底部的视图。要解决此问题，只需将以下内容添加到广场的视图中，如下所示：

       <View
        style={{
          marginTop: 150,
          alignItems: 'center',
          justifyContent: 'center',
          zIndex: 100
        }}>
        <Text>TEST</Text>
        <Text
          style={{
            position: 'absolute',
            top: 140,
            zIndex: 1,
            elevation: 1,
          }}>
          TEXT HERE
        </Text>
      </View>

然后，如果这对您没有帮助，请像这样设置正方形的视图 zIndex: -1：

      <View
        style={{
          flex: 1,
          justifyContent: 'flex-end',
          marginBottom: windowHeight * -0.05,
          zIndex: -1
        }}>
        <Square></Square>
      </View>

当这样做时，我们实际上是在告诉视图切换位置，并且带有空格的视图被强制到底部。

React Native 文本位于对象后面

React Native text goes behind object

css

z-order

styling

react-native