在 Flatlist 组件中对多个文件进行 react-native 导航

Question

我正在使用 react-navigation 进行导航，现在我正在尝试使用我的平面列表在屏幕之间导航。我想要它，以便当我单击列表中的一个项目时，我会发送到详细信息屏幕，但是每当我使用此代码按下列表中的一个项目时，什么都不会发生。我试图将导航属性从主屏幕组件传递给 MyListItem 组件，但后来我得到 undefined is not an Object 错误。

但是，我的主屏幕组件中有一个测试 TouchableOpacity，如果我点击它，我可以导航到详细信息屏幕（请参阅主屏幕组件中的“测试”文本）。

我认为我的导航属性有问题，但我一直在到处搜索，但没有找到解决方案。

这是我的带有 StackNavigator 的 App.js 文件：

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

这是发生问题的我的 HomeScreen 文件：

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;

Ps：我在 Android 模拟器上运行代码。

编辑：将答案建议编辑到代码中

Answer 1

可能是拼写错误，但是当您将屏幕声明为 Detail 时，您尝试导航到 navigate('Details')

{
  Home: HomeScreen,
  Detail: DetailScreen, <----
},