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> 
    ); 
    } 
}