javascript - React Native - TouchableOpacity 导致应用程序在 Android 上崩溃

Question

我有一个简单的组件，可以在两组项目之间切换 - 营业时间和欢乐时光。该组件在 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');

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,
  },
})

如前所述，崩溃时我并没有真正收到错误。有一次，我看到了类似“试图分配只读属性”的内容，但我再也看不到该错误消息了。任何帮助或正确方向的观点将不胜感激。

谢谢!

编辑:

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

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

编辑 2:

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

回答

这一切现在看起来有点傻，但我的错误是由 activeOpacity='1' 引起的。我将 1 作为 String 而不是 Number 传递。 activeOpacity={1} 就可以了。帮自己一个忙(在这种情况下不像我)并使用 linter。

Answer 1

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

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

一不小心就崩溃了。我应该有

style={{marginRight: 20}}

相反。即使只是拥有

style={{marginRight: '20'}}

或

{{marginRight: "20"}}

导致它崩溃。

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