OnPress不是在Android上启动,但在iOS上很好

你需要给予 高度 和 宽度 到 可触摸不透明度

            <TouchableOpacity
                activeOpacity={0.97} 
                onPressIn={() => console.log('in')} 
                onPressOut={() => console.log('out')} 
                onPress={() => { console.log('do something!'); navigation.navigate('EnterEmail'); }} 
                style={[style.submit, { zIndex: 99999, elevation: 99999, height:200, width:200 }]}>
                <Text style={style.submitText}>
                    {i18n.t('SIGN_IN')}
                </Text>
            </TouchableOpacity>

我只是加了一句 二百 用于测试。

Android的工作代码:

<View style={{ flex: 1, backgroundColor: 'red' }}> <View style={style.container}> <View style={style.top}> </View> <View style={style.bottom}> <TouchableOpacity activeOpacity={0.97} onPressIn={() => alert('in')} onPressOut={() => alert('out')} onPress={() => { alert('do something!'); }} style={[style.submit, { zIndex: 99999, elevation: 99999 }]}> <Text style={style.submitText}> GENERAL TEXT </Text> </TouchableOpacity> </View> </View> </View>

我找到了问题的原因。

简短回答:

我的应用程序根目录中有一个组件正在创建一个不可见的覆盖。这是因为 display: 'none' 和 position: 'absolute' 如果应用于Android上的同一个元素,则不起作用。

长回答:

在我的根组件中,我有一个菜单,它从屏幕底部出现,名为 OptionsMenu :

export default function App (): Element<typeof Provider> {
  return (
    <Provider store={store}>
      <ActionSheetProvider>
        <OptionsMenuContext.Provider>
          <>
            <Navigation uriPrefix={DEEP_LINK_URI_PREFIX} ref={setNavigator} />
            <Notification />
            <OptionsMenu />
          </>
        </OptionsMenuContext.Provider>
      </ActionSheetProvider>
    </Provider>
  );
}

里面 选择权 有一个覆盖屏幕的覆盖层,这样我们可以在菜单出现时使所有内容变暗。覆盖层(最外层 Animated.View 有 位置:“绝对” 以及 显示:“没有” . 这个 display 设置来自道具和 position 来自 style.container :

function OptionsMenu ({ hideOptionsMenu, overlayDisplay, overlayOpacity, containerPositionBottom, options = [] }: Props): Element<typeof Animated.View> {
  return (
    <Animated.View style={[style.container, { display: overlayDisplay }]}>
      <TouchableWithoutFeedback onPress={hideOptionsMenu}>
        <Animated.View style={[style.overlay, { opacity: overlayOpacity }]} />
      </TouchableWithoutFeedback>
      <Animated.View style={[style.optionsContainer, { bottom: containerPositionBottom }]}>
        {options.map(({ icon, text, onPress, type, component: Component }: Option) => !Component
          ? (
            <TouchableOpacity activeOpacity={0.97} key={text} disabled={!onPress} onPress={onPress} style={style.optionContainer}>
              {!!icon && (
                <Image source={icon} style={[style.optionIcon, optionTypeTintMap[type]]} />
              )}
              <Text style={[style.optionText, optionTypeColorMap[type || 'neutralColor']]}>
                {text}
              </Text>
            </TouchableOpacity>
          ) : (
            <Component key={text} />
          ))}
      </Animated.View>
    </Animated.View>
  );
}

export default withOptionsContext(OptionsMenu);

问题是在Android上,绝对定位将覆盖显示设置。因此,解决方案是将绝对定位的组件包装在控制显示设置的组件中:

选项菜单/style.js:

export default StyleSheet.create({
  container: {
    flex: 1,
    // Removed these:
    // position: 'absolute',
    // left: 0,
    // bottom: 0,
    // width: screenWidth,
    // height: screenHeight,
    // zIndex: 19,
    // elevation: 19
  },

  // Moved styles to new property:
  overlayContainer: {
    flex: 1,
    position: 'absolute',
    left: 0,
    bottom: 0,
    width: screenWidth,
    height: screenHeight,
    zIndex: 19,
    elevation: 19
  },

选项菜单/选项菜单.js:

function OptionsMenu ({ hideOptionsMenu, overlayDisplay, overlayOpacity, containerPositionBottom, options = [] }: Props): Element<typeof Animated.View> {
  return (
    // Added new <View /> to control display setting separately:
    <View style={[style.container, { display: overlayDisplay }]}>
      <Animated.View style={style.overlayContainer}>