FlatList的onClick转到下一屏幕

Question

我如何做一个Flatlist导航到下一个屏幕时，单击某一行是Flatlist内的反应母语？

编辑：我贴我的JS文件中的所有代码。

这里是我的flatlist代码：

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

const Tasks = (props) => { 
    const { navigate } = props.navigation; 
    return (
     <View style={styles.container}> 
     <FlatList 
      data={[ 
      {key: 'Task 1'}, 
      {key: 'Task 2'}, 
      {key: 'Task 3'}, 
      {key: 'Task 4'}, 
      {key: 'Task 5'}, 
      ]} 
      renderItem={({item}) => <TouchableHighlight onPress={() => this.goToNextScreen()}> 
     <Text style={styles.item}>{item.key}</Text>} 
</TouchableHighlight>} 
     /> 
      <TouchableOpacity style={{ height: 50, marginTop: 5, marginLeft: 100, marginRight: 100 }}> 
     <Button 
       onPress={()=>navigate('Steps')} 
       title="Steps" 
       /> 
       </TouchableOpacity> 
     </View> 
    ); 
    } 


const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    paddingTop: 22 
    }, 
    item: { 
    padding: 10, 
    fontSize: 18, 
    height: 44, 
    }, 
}) 

Tasks.navigationOptions = { 
    title: 'Task Order', 
}; 

export default Tasks 

Answer 1

我有那个简单的例子：

//Tasks Component 
const Tasks = (props) => { 
    const { navigate } = props.navigation; 
    //function to go to next screen 
    goToNextScreen =() => { 
     return navigate('Detail'); 
    } 
    return (
     <View> 
     <FlatList 
      data={[ 
      {key: 'Task 1'}, 
      {key: 'Task 2'}, 
      {key: 'Task 3'}, 
      {key: 'Task 4'}, 
      {key: 'Task 5'}, 
      ]} 
      renderItem={({item}) => { 
       return(
       <TouchableHighlight onPress={() => this.goToNextScreen()}> 
        <Text >{item.key}</Text> 
       </TouchableHighlight> 
      ) 
      } 
      } 
     /> 
     </View> 
    ); 
} 

//example for detail screen 
const Detail = (props) => { 
    const { navigate } = props.navigation; 
    return(
     <View><Text>Detail Screen</Text></View> 
    ); 
} 

//initial screen 
const App = StackNavigator({ 
    Tasks: {screen: Tasks}, 
    Detail: {screen: Detail}, 
}) 

也许可以帮助你，谢谢:)