TouchableHighlight press error

问题

I'm new to react-native, I'm just trying to play around with actions and states. I don't get where's the problem in this component.

I get the error 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);

回答1:

You never ever want to mutate state, instead you're going to want to use setState.

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

change to:

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

回答2:

First, listen to the answer from Matt Aft as that is one big error in your code.

Second, the actual error you are getting is a problem with Native Base and TouchableHighlights. See this bug. I've never used Native Base, but I do know that TouchableHighlights can only have one child component and it seems like the bug deals with that as the suggestion is to wrap any Native Base components that are a child of a TouchableHighlight in a View. So your render code should look something like this:

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

This is an aside from the answer - If you are starting out with React Native, I suggest not using an extra library that you don't fully understand yet (e.g., Native Base) as you may run into bugs that seem mysterious and impossible to debug without knowing how things work.

回答3:

First, Michael Cheng and Matt Aft's answer maybe helpful, have a try.

Second, I have another advice(not a answer, just a advice :) ). I have run into another bug of TouchableHighlight occasionally(I can not give your the error message at this moment). In my case, I use TouchableOpacity instead of it temporary.

So I suggest you using a custom component (like XXXTouchble)and make it extends TouchableOpacity or TouchableHighlight, then use your own XXXTouchble in your code. If the bug is fixed some day, your needn't to modify all your file but the XXXTouchble.

来源：https://stackoverflow.com/questions/43483825/touchablehighlight-press-error

标签

react-native

react-native-android