React Native - TouchableOpacity 不适用于位置为绝对的容器

Question

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

• 使用触摸高亮
• 使用 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;
  `}
`;

Answer 1

我刚刚发现问题，在我的 App.js 中我只是更改了组件的顺序。 Alert 组件放置在 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>
  </>
);

就是这样:)

Answer 2

给定样式中的 zIndex 并设置顶部和底部位置

<View style={styles.scrollBtnView}>
    <TouchableOpacity
      style={styles.scrollBtn}>
      <Text fontSize={18} color={colors.onBlack}>
        {scrollDirection === 'top' ? 'Scroll to Top' : 'Scroll to Bottom'}
      </Text>
    </TouchableOpacity>
  </View>

const 样式 = StyleSheet.create({ 滚动BtnView：{ 位置：'绝对'， 宽度：'100%'， 底部：'15%'， 左：8， z指数：999， 对齐项目：'居中'， }, 滚动按钮：{ 垂直填充：10， 水平填充：20， 边框半径：999， 边框宽度：1， borderColor: 颜色.onBlack, 背景颜色：颜色.背景， 对齐项目：'居中'， }, });