TouchableHighlight按錯誤

Question

我是新來的反應原生，我只是想玩弄動作和狀態。 我不明白這個組件中的問題在哪裏。

我得到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

首先，傾聽來自馬特前前後後的答案，因爲這是在你的代碼的一個大錯誤。

其次，您遇到的實際錯誤是Native Base和TouchableHighlights的問題。 See this bug。我從來沒有使用Native Base，但我確實知道TouchableHighlights只能有一個子組件，並且看起來像這個bug會處理這個問題，因爲建議是在View中包裝TouchableHighlight的子組件。所以，你的渲染代碼應該是這個樣子：

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

這是一個除了答案 - 如果您正在使用開始了本土做出反應，我建議不要使用額外的庫，你不完全聽懂了沒有（例如Native Base），因爲你可能會遇到一些看起來很神祕而且不可能在不知道事情如何工作的情況下進行調試的bug。

Answer 3

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

二，我有另一個建議（不是一個答案，只是一個建議:)）。偶爾遇到TouchableHighlight的另一個bug（我現在不能給你錯誤信息）。就我而言，我使用TouchableOpacity而不是臨時的。

所以我建議你使用一個自定義組件（如XXXTouchble）並使其擴展到TouchableOpacity或TouchableHighlight，然後在你的代碼中使用你自己的XXXTouchble。如果錯誤在某一天被修復，那麼您不必修改您的所有文件，而是修改XXXTouchble。