问多个文件上的Flatlist组件的本机导航

EN

import React from 'react';
import { createStackNavigator } from 'react-navigation'

import HomeScreen from './screens/HomeScreen'
import DetailScreen from './screens/DetailScreen'

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailScreen,
  },
  {
    initialRouteName: 'Home',
    navigationOptions: {
      header: null,
    },
  }
);


export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

import React from 'react'
import { StyleSheet, Text, View, TouchableOpacity, StatusBar, 
FlatList, Image } from 'react-native'

import Data from '../data/Data'

class MyListItem extends React.Component {
    render() {
        return(
            <View style={styles.container}>
                <TouchableOpacity
                    onPress={this.props.handleOnPress}
                >
                    <View style={{ flexDirection: 'row', heigth: 100, width: 100 }}>
                        <View>
                            <Image style={{ height: 50, width: 50, resizeMode: 'contain' }} source={require('../res/icon.png')} />
                        </View>
                        <View style={{ justifyContent: 'center' }}>
                            <Text>
                                {this.props.item.name}
                            </Text>
                        </View>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}



class HomeScreen extends React.Component {

    handleOnPress = () => {
        this.props.navigation.navigate('Details')
    }

    render() {
        return (
            <View>
                <StatusBar hidden={true} />
                <TouchableOpacity
                    onPress={() => this.props.navigation.navigate('Details')}
                >
                    <Text>Test</Text>
                </TouchableOpacity>
                <FlatList
                    data={Data}
                    renderItem={({ item }) =>
                        <MyListItem 
                            item={item}
                            onPress={this.handleOnPress}
                        />
                    }
                />
            </View>
        );
    }
}


export default HomeScreen;