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

如前所述，当崩溃时我真的不会收到错误。有一次，我看到＆＃34; 试图分配只读属性，＆＃34;但我不再看到该错误消息。任何帮助或正确方向的观点将不胜感激。

谢谢！

修改：

更新了简化示例。似乎崩溃来自条件渲染（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。

Answer 1

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

的情况下

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

错误地崩溃了。我应该有

style={{marginRight: 20}}

代替。即使只是

style={{marginRight: '20'}}

或

{{marginRight: "20"}}

导致它崩溃。

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

Answer 2

这看起来像一个问题，即类方法不会自动绑定到实例。将它们添加到构造函数中：

this.hoursPressed = this.hoursPressed.bind(this);
this.happyHoursPressed = this.happyHoursPressed.bind(this);

这是使用带有React的ES6类的常见问题。

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

2 个答案: