React native TouchableOpacity onPress 在 Android Build (APK) 上不起作用

Posted 2023-03-10

【中文标题】React native TouchableOpacity onPress 在 Android Build (APK) 上不起作用

【英文标题】：React native TouchableOpacity onPress not working on Android Build (APK)

【发布时间】：2020-09-19 21:08:56

【问题描述】：

TouchableOpacity 可以在安卓模拟器和手机上运行，​​但是当我生成 APK 时，TouchableOpacity 不再工作了。

会发生什么？

当我点击 TouchableOpacity 时没有任何反应，它只是制作不透明动画

正确的做法是转到主屏幕，但它没有

上面有像 z-index 这样的东西吗？

Javascript 代码如下

import React from 'react';
import View, Image, Text, TouchableOpacity, TextInput from 'react-native';
import useNavigation from '@react-navigation/native';
import useField from '@unform/core';
import Form from '@unform/mobile';
import KeyboardAwareScrollView from 'react-native-keyboard-aware-scroll-view';

import styles from './styles';

import logoImg from '../../assets/logo.png';
import Home from '../Home';

export default function Login() 
  const navigation = useNavigation();

  function navigateToHome() 
    navigation.navigate(Home);
  

  return (
    <KeyboardAwareScrollView style=styles.scroll>
      <View style=styles.container>
        <Image style=styles.logo source=logoImg />
        <TextInput style=styles.input placeholder="Login" />
        <TextInput
          secureTextEntry=true
          style=styles.inputPassword
          placeholder="Senha"
        />
        <TouchableOpacity style=styles.button onPress=navigateToHome>
          <Text style=styles.buttonText>Entrar</Text>
        </TouchableOpacity>
      </View>
    </KeyboardAwareScrollView>
  );

样式代码如下

import StyleSheet from 'react-native';

export default StyleSheet.create(
  container: 
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#fff',
  ,
  scroll: 
    backgroundColor: '#fff',
  ,
  logo: 
    marginTop: 30,
  ,
  input: 
    marginTop: 30,
    padding: 10,
    width: 300,
    height: 56,
    backgroundColor: '#f5f5f5',
    fontSize: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#8CC63F',
    borderRadius: 4,
  ,
  inputPassword: 
    marginTop: 30,
    padding: 10,
    width: 300,
    height: 56,
    backgroundColor: '#f5f5f5',
    fontSize: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#8CC63F',
    borderRadius: 4,
  ,
  button: 
    width: 122,
    height: 66,
    marginTop: 60,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#20565C',
    borderRadius: 4,
  ,
  buttonText: 
    fontSize: 16,
    color: '#fff',
    textTransform: 'uppercase',
    fontWeight: 'bold',
  ,
);

【问题讨论】：

您说您可以正确地看到不透明度。我认为它与 zIndex 无关。添加一个日志并尝试检查它是否显示在 android Studio logcat 中

我正在使用 Reactotron 并在函数 navigateToHome() 中添加 console.tron.log('click') 应用程序崩溃

【参考方案1】：

如下更新代码：

<TouchableOpacity style=styles.button onPress=()=>this.navigateToHome>
      <Text style=styles.buttonText>Entrar</Text>
    </TouchableOpacity>

希望它对你有用。

【讨论】：

当我点击不透明动画时

再次尝试浏览您的导航代码，我确定缺少某些内容。尝试添加一条警报语句，看看它是否会触发确认可触摸不透明度有效的警报。

我用点击消息创建了一个警报，它在 APK 中正常工作，导航不工作

我的样式代码不是问题吗？奇怪的是，在模拟器中它可以工作，但在 apk 中没有

我解决了它把''放在这样的函数中 navigateToHome navigation.navigate('Home')