React Native如何将一个视图放置在另一个视图之前

问题描述 投票:0回答:1

我在React Native代码中的另一个视图前面有一个视图,我想对其进行更改。

我该怎么做?

我尝试过绝对放置位置,但是不起作用。

你有小费吗?

**代码JSX波纹管:**

O不知道我能告诉你什么,堆栈溢出不知道。

<PanGestureHandler
        onGestureEvent={animatedEvent}
        onHandlerStateChange={onHandlerStateChanged}>
        <Animated.View
          style={{
            height: 90,
            width: 90,
            backgroundColor: '#8CC63F',
            borderRadius: 50,
            marginTop: 200,
            transform: [
              {
                translateX: translateX.interpolate({
                  inputRange: [-120, 0, 120],
                  outputRange: [-100, 0, 120],
                  extrapolate: 'clamp',
                }),
              },
            ],
          }}>
          <View style={styles.iconContainer}>
            <MaterialCommunityIcons
              style={styles.iconContainer}
              name="racing-helmet"
              size={36}
              color="#fff"
            />
          </View>
        </Animated.View>
      </PanGestureHandler>
      <View style={styles.iconsNavigation}>
        <MaterialIcons
          style={styles.iconSpace}
          name="cancel"
          size={30}
          color="#707070"
        />
        <MaterialIcons
          style={styles.iconSpace}
          name="check-circle"
          size={30}
          color="#8CC63F"
        />
      </View>
    </View>

波纹管样式代码:

   iconContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 12,
  },
  iconsNavigation: {
    flexDirection: 'row',
  },
  iconSpace: {
    paddingHorizontal: 125,
    bottom: 60,
  },[![View in front of the other][1]][1]

Image front j dd ddddddddddssxsxaaxxasxsasssssssssssssscsccdcdcdccdcdcdcdcdcddcdddddcdcdc

react-native css-position absolute
1个回答
0
投票

例如,您可以使用zIndex进行此操作:

    <View id="top" style={{width: 100, height: 100, zIndex:2, backgroundColor: 'white'}} />
    <View id="bottom" style={{width: 100, height: 100, zIndex:1, backgroundColor: 'black'}} />

通过运行此命令,白色id为“ top”的视图将位于最前面。现在,您可以在代码中使用此zIndex样式属性。

© www.soinside.com 2019 - 2024. All rights reserved.