时间戳

首页 > 解决方案 > 组件渲染高于其他组件，但不低于

react-native - 组件渲染高于其他组件，但不低于

问题描述

我有一个屏幕，其中有一个 MenuItem 组件和一个 ViewCard 组件。这个视图卡应该在它上面渲染。请参阅 ViewCard 组件代码。

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

export default function ViewCard() {
  return (
    <View
      stlye={{
        flex: 1,
        alignItems: 'center',
        flexDirection: 'row',
        position: 'absolute',
        justifyContent: 'center',
        bottom: 130,
        zIndex: 999,
      }}>
      <View
        stlye={{
          flexDirection: 'row',
          justifyContent: 'center',
          width: '100%',
        }}>
        <TouchableOpacity
          style={{
            marginTop: 20,
            backgroundColor: 'black',
            alignItems: 'center',
            padding: 13,
            borderRadius: 30,
            width: 300,
            position: 'relative',
          }}>
          <Text style={{ color: 'pink', fontSize: 20 }}>VIEWCART</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

此组件正在与其他组件一起呈现到屏幕上

import React from 'react';
import { View, Text } from 'react-native';
import { Divider } from 'react-native-elements/dist/divider/Divider';
import About from '../components/restaurantDetail/About';
import MenuItem from '../components/restaurantDetail/MenuItem';
import ViewCard from '../components/restaurantDetail/ViewCard';

export default function RestaurantDetail({ route, navigation }) {
  return (
    <View>
      <About route={route} />

      <Divider width={1.8} style={{ marginVertical: 20 }} />

      <MenuItem />
      <ViewCard navigation={navigation} />
    </View>
  );
}

当 Viewcard 位于 MenuItem 组件上方时，它会在 Divider 和菜单项之间呈现，但不像 Z 轴上的“上方”，当它位于下方时不会呈现。在 ViewCard 中，最高的 View 使其成为其上方的 zIndex，并使其成为绝对位置，底部放置。

标签： react-nativeexpo

解决方案

Instead of zIndex: 999 try elevation: 1 where 1 being the stack elevation number, increase it accordingly

推荐阅读