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

を作りましたリクエストごとに