Question

我正在研究React Native项目，当元素具有以下CSS时，我正在努力获得TouchableOpacity来触发它的新闻功能：

position: absolute;
z-index: 2;

下面是代码：

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { View } from 'react-native';

const StyledImage = styled.Image`
  height: 24px;
  width: 32px;
`;

const MenuContainer = styled.View`
  display: flex;
  position: absolute;
  background-color: #2d2d2d;
  height: ${Dimensions.get('screen').height};
  width: ${Dimensions.get('screen').width * 0.75};
  z-index: 2;
  margin-left: -8px;
  margin-top: -16px;
`;

const ProfileSectionContainer = styled.View`
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-bottom: 24px;
`;

const HeadingContainer = styled.View`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 20px;
`;

const CloseButton = styled(Body1)`
  font-size: 18px;
`;

const MenuItemsContainer = styled.View`
  padding: 0 20px;
`;

const SignOutContainer = styled.View`
  position: absolute;
  bottom: 100;
  flex: 1;
  left: 40%;
`;

const handleLogout = navigate => async () => {
  await logout()
  redirectToLogin(navigate)();
};

const toggleIsOpen = (isOpen, setIsOpen) => () => setIsOpen(!isOpen);

const Menu = ({ isOpen, setIsOpen, navigate }) => (
  <MenuContainer>
    <HeadingContainer>
      <View>
        <Body1 color="#fff">New App</Body1>
      </View>
      <View>
        <TouchableOpacity onPress={toggleIsOpen(isOpen, setIsOpen)}>
          <CloseButton color="#fff">X</CloseButton>
        </TouchableOpacity>
      </View>
    </HeadingContainer>
    <ProfileSectionContainer>
      <ProfileSection />
    </ProfileSectionContainer>
    <MenuItemsContainer>
      <MenuItems menuItems={[{ text: 'Link 1' }, { text: 'Link 2' }]} />
    </MenuItemsContainer>
    <SignOutContainer>
      <TouchableOpacity onPress={handleLogout(navigate)}>
        <Body1 color="#fff">Sign Out</Body1>
      </TouchableOpacity>
    </SignOutContainer>
  </MenuContainer>
);

我已经查看了所有StackOverflow链接，但所有解决方案似乎都不起作用。

我目前正在使用React Native 0.59.8，这是在撰写此问题时的最新消息。

编辑：当前无法使用的TouchableOpacity是Sign Out底部的MenuContainer按钮。我确实有另一个TouchableOpacity，其中包含X，可以关闭菜单，并且效果很好。

Answer 1

您是否尝试在TouchableOpacity上添加z索引？也许您的按钮位于其他组件后面

Answer 2

尝试使用此绑定选项：

constructor(props) {
    super(props);
    this.toggleIsOpen = this.toggleIsOpen.bind(this);
    this.handleLogout = this.handleLogout.bind(this);
}

React Native：当使用zIndex绝对定位时，不会触发touchableOpacity onPress

2 个答案: