Question

我正在尝试学习React Native，并且在示例应用程序运行时，在使用Button组件时出现错误。该错误来自我的Android Lollipop 5.1智能手机的正常红色背景。

java.lang.String cannot be cast to
com.facebook.react.uimanager.AccessiblityDelegate$AccessibilityRole

setDelegate
AccessbilityDelegateUtil.java:93

updateViewAccessibility
BaseViewManager.java:260

// and more stack trace was given

App.js包含以下代码，该代码在VS代码中未显示任何错误。

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'This was edited by Shukant Pal for testing',
});

type Props = {};
export default class App extends Component<Props> {
_startGame = () => {

}

_loadExistingGame = () => {

}

_loadTemplateLibrary = () => {

}

_displayAboutUs = () => {

}

render() {
  return (
    <View style={styles.container}>
      <Text>This works</Text>
      <View style={styles.container}>
        <Button onPress={this._startGame} title="New Game" />
      </View>
    </View>
  );
}
}

const styles = StyleSheet.create({
 container: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

在发布此问题之前，我进行了以下检查：

react-native导入的按钮
在onPress={this._startGame}给出错误之前。将方法声明从name()更改为name = () => {}之后，就解决了。谁能解释为什么？（我是React和React Native的新手）

Answer 1

由于javascript“ this”关键字的工作方式。在事件侦听器上使用“ this”时，“ this”关键字不再引用类组件，而是引用事件所作用的元素，因此这就是您得到错误的原因。

请查看本文，以详细说明this关键字。

this - Javascript | MDN

Answer 2

如果要使用不带箭头功能的功能，可以绑定功能。

例如。

constructor(props) {
  super(props);

  // This binding is necessary to make `this` work in the callback
  this._startGame = this._startGame.bind(this);
}

_startGame() {
  // Do something
}

为什么？

您必须小心JSX回调中的含义。在JavaScript中，默认情况下不绑定类方法。如果忘记绑定this.handleClick并将其传递给onClick，则在实际调用该函数时将无法定义。

这不是特定于React的行为；它是函数在JavaScript中工作方式的一部分。通常，如果您引用的方法后面没有（），例如onClick = {this.handleClick}，则应绑定该方法。

Official

您的方式是将ES7阶段2中的类属性设为_startGame = () => {}。

https://borgs.cybrilla.com/tils/es7-class-properties/

CRNA为此语法添加了babel-plugin-proposal-class-properties。这样便可以在不对babel进行其他设置的情况下使用语法。

https://babeljs.io/docs/en/babel-plugin-proposal-class-properties

React Native：使用内置按钮时发生错误

2 个答案:

为什么？