我有一个简单的组件，可以在两组项目之间切换 - 时间和欢乐时光。该组件在 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 作为 aString而不是作为Number. activeOpacity={1}诀窍。帮自己一个忙（在这种情况下与我不同）并使用 linter。