React Native - TouchableOpacity 不适用于具有位置的容器：绝对

Posted 2023-04-18

【中文标题】React Native - TouchableOpacity 不适用于具有位置的容器：绝对

【英文标题】：React Native - TouchableOpacity not working on container with position: absolute

【发布时间】：2020-09-26 01:57:50

【问题描述】：

我有一个动画 SafeAreaView，里面有 2 个按钮，视图有 position: absolute。 当我单击按钮时，它会通过它，并点击 de 按钮后面的元素。 我目前正在使用zIndex和elevation，并尝试了很多在Stack Overflow上找到的解决方案，例如：

使用 TouchableHighlight 使用 onPressIn 代替 onPress 从 react-native-gesture-handler 而不是 react-native 导入 TouchableOpacity

如果我在父容器中使用 position: relative，则该按钮有效。

这是我的代码，Button 组件是样式化的 TouchableOpacity，我还尝试删除包装器，将主容器更改为 TouchableOpacity 而不是 SafeAreaView，但没有。 ..

return (
    <Wrapper
      isandroid=Platform.OS === 'android'
      style=
        transform: [
          
            translateY: translateValue.interpolate(
              inputRange: [0, 1],
              outputRange: [500, 0]
            )
          
        ]
      >
      <ButtonsWrapper>
        <ActionButton
          inverted
          secondary
          onPress=() => 
            console.log('teste');
          
          accessible
          accessibilityLabel="Continuar com Facebook">
          <Icon name="edit" secondary size=20 />
          <BtnText bold noPadding secondary>
            Editar
          </BtnText>
        </ActionButton>
        <ActionButton
          inverted
          primary
          onPress=() => 
            console.log('teste');
          
          accessible
          accessibilityLabel="Continuar com Facebook">
          <Icon name="x-circle" primary size=20 />
          <BtnText bold noPadding primary>
            Encerrar
          </BtnText>
        </ActionButton>
      </ButtonsWrapper>
    </Wrapper>
  );
);

const Wrapper = Animated.createAnimatedComponent(styled.SafeAreaView`
  width: 100%;
  border-top-width: 1px;
  border-top-color: $( theme:  border  ) => border;
  background: $( theme:  background  ) => background;
  z-index: 1;
  position: absolute;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  bottom: 0;
  left: 0;
  $( isAndroid ) => isAndroid && 'elevation: 1'
  height: 150px;
`);

const ButtonsWrapper = styled.View`
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 10px;
`;

const ActionButton = styled(Button)``;

const BtnText = styled(Text)`
  padding-right: 20px;
  flex: 1;
  text-align: center;

  $( noPadding ) =>
    noPadding &&
    `
      padding: 0px;
  `
`;

【参考方案1】：

我刚刚发现了问题，在我的 App.js 中我只是更改了组件的顺序。 Alert 组件放置在 de NavigationContainer 之前，放置在 NavigationContainer 之后> 它按预期工作。

之前：

export const App = () => (
  <>
    <StatusBar backgroundColor=theme.background barStyle="dark-content" />
    <ThemeProvider theme=theme>
      <Provider store=store>
        <PersistGate loading=null persistor=persistor>
          <Alert />
          <Socket>
            <NavigationContainer>
              ...
            </NavigationContainer>            
          </Socket>
        </PersistGate>
      </Provider>
    </ThemeProvider>
  </>
);

之后：

export const App = () => (
  <>
    <StatusBar backgroundColor=theme.background barStyle="dark-content" />
    <ThemeProvider theme=theme>
      <Provider store=store>
        <PersistGate loading=null persistor=persistor>          
          <Socket>
            <NavigationContainer>
              ...
            </NavigationContainer>            
            <Alert />
          </Socket>
        </PersistGate>
      </Provider>
    </ThemeProvider>
  </>
);

就是这样:)