TouchableXXX會自動觸發時，應用程序啓動reactnative

Question

我試圖總結以下this tortial

而且我發現的問題是，導航會自動觸發所推出的應用程序，它會導航到觸項沒有按下它的詳細信息頁面。 回到頁面時，無法按下可觸摸的項目，按下時會拋出錯誤。

我做了一個最小的應用程序起訴了這一點：

import React , { Component } from 'react'; 
import { StyleSheet,FlatList, Text, View,TouchableOpacity } from 'react-native'; 
import { 
    StackNavigator, 
} from 'react-navigation'; 


class Detail extends Component { 
    static navigationOptions = { 
    title: "Detail", 
    }; 

    render(){ 
    return(
     <View> 
      <Text>{this.props.value}</Text> 
     </View> 
    ); 
    } 
} 

class MyItem extends Component{ 
    render(){ 
    return(
     <View> 
     <TouchableOpacity onPress={this.props.nav("Detail", {value: this.props.value})}> 
     <Text> {this.props.value}</Text> 
     </TouchableOpacity> 
     </View> 
    ); 
    } 
} 

class Home extends React.Component { 
    static navigationOptions = { 
    title: "Home", 
    }; 
    render() { 
    const {navigate} = this.props.navigation; 
    return (
     <View style={styles.container}> 
     <FlatList 
      data = {[ 
      {key: "1"}, 
      {key: "2"}, 
      {key: "3"} 
      ] 
      } 
      renderItem = {({item}) => <MyItem nav={navigate} value={item.key} />} 
     /> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor: '#fff', 
    alignItems: 'center', 
    justifyContent: 'center', 
    }, 
}); 

const App = StackNavigator({ 
    Home: { screen: Home }, 
    Detail: { screen: Detail }, 
}) 

export default App 

因爲它是很難形容我的英語不好這個問題，我也做了一個youtube video (about 20M)起訴這個問題

Answer 1

class MyItem extends Component{ 
    render(){ 
    return(
     <View> 
     <TouchableOpacity onPress={() => { this.props.nav("Detail", {value: this.props.value})} }> 
     <Text> {this.props.value}</Text> 
     </TouchableOpacity> 
     </View> 
    ); 
    } 
} 

根據要求

class MyItem extends Component{ 
    handleClick =() => { 
    const { nav, value } = this.props; 
    nav("Detail", {value}); 
    } 
    render(){ 
    return(
     <View> 
     <TouchableOpacity onPress={this.handleClick}> 
     <Text> {this.props.value}</Text> 
     </TouchableOpacity> 
     </View> 
    ); 
    } 
}