TouchableXXX sera automatiquement déclenchée lorsque l'application démarre à reactnative

Question

Je suis en train d'emballer les articles touchables suivant this tortial

Et le problème que je trouve que la navigation sera déclencheur automatique par le lancement de l'application, il naviguera au page de détail sans appuyer dessus. Et lorsque vous revenez en arrière, les éléments touchables ne peuvent plus être pressés, une fois pressés, une erreur sera levée.

J'ai fait une application minimum pour inculper que sur:

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 

Comme il est très difficile de décrire ce problème avec mon mauvais anglais, j'ai aussi fait un youtube video (about 20M) pour inculper ce problème

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

Selon la demande

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