在 Flatlist 组件中对多个文件进行本机导航

Question

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

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

我想我的导航有问题属性，但我到处搜索都没有找到解决办法。

这是我使用 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 />;
  }
}

这是发生问题的主屏幕文件：

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, <----
},

在 Flatlist 组件中对多个文件进行本机导航

react-native navigation in Flatlist component over multiple files

react-native

react-native-android

react-native-navigation

react-native-flatlist