TouchableHighlight按下错误

Question

我是 react-native 的新手，我只是想尝试一下动作和状态。我不明白这个组件的问题在哪里。

我收到错误 undefined is not an object (evaluating 'this.wrappedInstance.setNativeProps')

import React, { Component } from 'react';
import { Container, Text } from 'native-base';
import {
    AppRegistry,
    View,
    TouchableHighlight
} from 'react-native';

export default class Page2 extends Component {
    constructor(){
        super();
        this.state  = {
            mess: "Page 2 message"
        }
    }
    onPress(){
        this.state.mess = this.state.mess+" wow a click!"
    }
    render() {
        return (
            <View>
                <TouchableHighlight
                    onPress={this.onPress}
                    underlayColor="blue"
                >
                <Text> {this.state.mess}</Text>
                </TouchableHighlight>
            </View>
        );
    }
}
AppRegistry.registerComponent('Page2', () => Page2);

Answer 1

你永远不想改变状态，而是想使用 setState。

 onPress(){
    this.state.mess = this.state.mess+" wow a click!" //mutating state
}

更改为：

onPress = () => { //arrow syntax will change the scope of `this` to your component
    this.setState(prevState => ({ mess: prevState.mess + " wow a click!" });
} // anytime you want to alter state based on previous state you should use this syntax

Answer 2

首先，请听听 Matt Aft 的回答，因为这是您代码中的一个大错误。

其次，您遇到的实际错误是 Native Base 和 TouchableHighlights 的问题。 See this bug。我从未使用过 Native Base，但我确实知道 TouchableHighlights 只能有一个子组件，而且似乎该错误处理了这个问题，因为建议是将任何作为 TouchableHighlight 子组件的 Native Base 组件包装在一个视图中。所以你的渲染代码应该是这样的：

render() {
    return (
        <View>
            <TouchableHighlight
                onPress={this.onPress}
                underlayColor="blue"
            >
                <View>
                    <Text> {this.state.mess}</Text>
                </View>
            </TouchableHighlight>
        </View>
    );
}

这是答案的一个旁白 - 如果您刚开始使用 React Native，我建议您不要使用您还没有完全理解的额外库（例如，Native Base）可能运行出现看似神秘且无法在不知道其工作原理的情况下进行调试的错误。

Answer 3

首先，Michael Cheng 和 Matt Aft 的回答可能有帮助，试试看。

其次，我有另一个建议（不是答案，只是建议 :)）。我偶尔会运行进入 TouchableHighlight 的另一个错误（此时我不能给你错误信息）。就我而言，我暂时使用 TouchableOpacity 而不是它。

所以我建议您使用自定义组件（如 XXXTouchble）并使其扩展 TouchableOpacity 或 TouchableHighlight，然后在您的代码中使用您自己的 XXXTouchble。如果某天错误得到修复，您无需修改所有文件，只需修改 XXXTouchble。

TouchableHighlight按下错误

TouchableHighlight press error

react-native

react-native-android