React Native - TouchableOpacity 导致应用在 Android 上崩溃 [英] React Native - TouchableOpacity causing app to crash on Android

问题描述

我有一个简单的组件可以在两组项目之间切换 - 小时和;欢乐时光.该组件在 iOS 上运行良好，但导致我的应用在 Android 上(无声地)崩溃.

我在这里有一个工作示例:https://snack.expo.io/Sk92sIEmf.这是使用的代码，供参考:

import React, { Component } from 'react';import { Dimensions, StyleSheet, Text, TouchableOpacity, View } from 'react-native';const { width } = Dimensions.get('window');导出默认类 App 扩展组件 {构造函数(道具){超级(道具)；this.state = {showAnother: 真,oneThingActive:假，anotherActive: 真,};}handlePress = () =>{const { anotherActive, oneThingActive } = this.state返回 this.setState({ anotherActive: !anotherActive, oneThingActive: !oneThingActive });}使成为() {const { showAnother, oneThingActive, anotherActive } = this.state返回 (<视图样式={s.container}><视图样式={s.sRow}><TouchableOpacity style={s.titleCont} activeOpacity='1' onPress={this.handlePress}><文本样式={[s.text, s.title, !oneThingActive &&s.inactive]}>一件事</TouchableOpacity>{ showAnother &&<文本样式={[s.text, s.title]}>|</Text>}{ showAnother &&<TouchableOpacity style={s.titleCont} activeOpacity='1' onPress={this.handlePress}><文本样式={[s.text, s.title, !anotherActive &&s.inactive]}>ANOTHER</Text></TouchableOpacity>}</查看>{ oneThingActive &&<视图样式={s.row}><Text style={[s.text, s.day]}>测试中..</Text></查看>}{ anotherActive &&<视图样式={s.row}><文本样式={[s.text, s.day]}>123..</Text></查看>}</查看>)}}const s = StyleSheet.create({容器: {弹性:1，flexDirection: '列',alignItems: '中心',justifyContent: '中心',边距水平:35，边距垂直:5，边框颜色:'#D4D4D4'，边框顶部宽度:1，边框底部宽度:1，},标题:{alignSelf: 'flex-start',},标题: {颜色:'#232323'，字体大小:14，alignSelf: 'flex-start',边距水平:5，},文本: {颜色:'#232323'，字体大小:13，},不活动:{颜色:'#95989A'，},排: {显示:'弹性'，flexDirection: '行',},行:{显示:'弹性'，flexDirection: '行',宽度:宽度，alignItems: '中心',justifyContent: '中心',填充底部:5，},})

如前所述，崩溃时我并没有真正收到错误消息.有一次，我看到了尝试分配只读属性"的效果，但我不再看到该错误消息.任何帮助或正确方向的观点将不胜感激.

谢谢！

更新了一个简化的例子.似乎崩溃来自条件渲染(this.state.oneThingActive && ...)，这是我经常使用的一种模式，并且没有遇到任何类似的问题.>

最好的重现方式是访问此链接:https://snack.expo.io/Sk92sIEmf，它有一个用于 React Native 应用程序的 IDE 设置.您应该会发现，当平台为 iOS 时，切换工作正常，但一旦在 Android 版本中尝试更改状态，应用就会崩溃.

编辑 2:

似乎问题是由于使用了 TouchableOpacity.... 我注意到 Android 应用程序从 console.log("...") 崩溃，所以我尝试交换 TouchableHighlight 并让它工作.未来几天将对此进行更多调查，但如果有人有意见，我们很乐意听取意见.

回答

这一切现在看起来有点傻，但我的错误是由 activeOpacity='1' 引起的.我以 String 而不是 Number 的形式传入 1.activeOpacity={1} 可以解决问题.帮自己一个忙(在这种情况下与我不同)并使用 linter.

解决方案

我刚遇到同样的事情.就我而言，这是一个不喜欢我风格的引号的问题.不确定您的情况，但就我而言，当我添加了

style={{marginRight: "20px"}}

错误地崩溃了.我应该有

style={{marginRight: 20}}

相反.即使只有

style={{marginRight: '20'}}

或

{{marginRight: "20"}}

导致它崩溃.

我注意到您的代码中有 activeOpacity='1'，我想知道您是否删除了 1 周围的引号是否能解决您的问题.

I have a simple component that toggles between two sets of items - Hours & Happy Hours. The component works fine on iOS, but causes my app to crash (silently) on Android.

I have a working example here: https://snack.expo.io/Sk92sIEmf. And here is the code used, for reference:

import React, { Component } from 'react';
import { Dimensions, StyleSheet, Text, TouchableOpacity, View } from 'react-native';

const { width } = Dimensions.get('window');

export default class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      showAnother: true,
      oneThingActive: false,
      anotherActive: true,
    };
  }

  handlePress = () => {
    const { anotherActive, oneThingActive } = this.state
    return this.setState({ anotherActive: !anotherActive, oneThingActive: !oneThingActive });
  }

  render() {

    const { showAnother, oneThingActive, anotherActive  } = this.state

    return (
      <View style={s.container}>
        <View style={s.sRow}>
          <TouchableOpacity style={s.titleCont} activeOpacity='1' onPress={this.handlePress}>
            <Text style={[s.text, s.title, !oneThingActive && s.inactive]}>ONE THING</Text>
          </TouchableOpacity>
          { showAnother &&
            <Text style={[s.text, s.title]}>|</Text>
          }
          { showAnother &&
            <TouchableOpacity style={s.titleCont} activeOpacity='1' onPress={this.handlePress}>
              <Text style={[s.text, s.title, !anotherActive && s.inactive]}>ANOTHER</Text>
            </TouchableOpacity>
          }
        </View>
        { oneThingActive &&
          <View style={s.row}>
            <Text style={[s.text, s.day]}>testing..</Text>
          </View>
        }
        { anotherActive &&
          <View style={s.row}>
            <Text style={[s.text, s.day]}>123..</Text>
          </View>
        }
      </View>
    )
  }
}

const s = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    marginHorizontal: 35,
    marginVertical: 5,
    borderColor: '#D4D4D4',
    borderTopWidth: 1,
    borderBottomWidth: 1,
  },
  titleCont: {
    alignSelf: 'flex-start',
  },
  title: {
    color: '#232323',
    fontSize: 14,
    alignSelf: 'flex-start',
    marginHorizontal: 5,
  },
  text: {
    color: '#232323',
    fontSize: 13,
  },
  inactive: {
    color: '#95989A',
  },
  row: {
    display: 'flex',
    flexDirection: 'row',
  },
  sRow: {
    display: 'flex',
    flexDirection: 'row',
    width: width,
    alignItems: 'center',
    justifyContent: 'center',
    paddingBottom: 5,
  },
})

As stated earlier, I don't really get an error when this crashes. At one point, I saw something to the effect of "attempted to assign read only property," but I am no longer seeing that error message. Any help or a point in the right direction would be greatly appreciated.

Thanks !

Edit:

Updated with a simplified example. It seems the crash is coming from the conditional render (this.state.oneThingActive && ...), a pattern I frequently use and have not run into any issues like this with.

The best way to reproduce is to visit this link: https://snack.expo.io/Sk92sIEmf, which has an IDE setup for React Native apps. You should find that the toggle works fine when the Platform is iOS, but once a state change is attempted in the Android version the app crashes.

Edit 2:

Seems the problem was due to the usage of TouchableOpacity.... I noticed the Android app was crashing from a console.log("..."), so I tried swapping in TouchableHighlight and got it to work. Going to investigate this more over the coming days, but would love to hear input if anyone has some.

Answer

This all seems a bit silly now, but my error was getting caused by activeOpacity='1'. I was passing in 1 as a String instead of as a Number. activeOpacity={1}does the trick. Do yourself a favor (unlike me in this instance) and use a linter.

解决方案

I just encountered the same thing. In my case it was an issue of it not liking quotes in my style. Not sure about your case, but in my case when I added a

style={{marginRight: "20px"}}

by mistake it crashed. I should have had

style={{marginRight: 20}}

instead. Even just having

style={{marginRight: '20'}}

or

{{marginRight: "20"}}

causes it to crash.

I notice that you have activeOpacity='1' in your code and am wondering if you remove the quotes around the 1 whether it solve your problem.

这篇关于React Native - TouchableOpacity 导致应用在 Android 上崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！