Question

我正在使用react-navigation进行导航，现在我正尝试使用我的平面列表在Screens之间导航。我想要它，这样当我单击列表中的某个项目时，它会发送到“详细信息”屏幕，但是每当我使用此代码按列表中的某个项目时，都不会发生任何事情。我试图将导航属性从Homescreen组件传递到MyListItem组件，但随后得到的undefined不是Object错误。

但是，我在主屏幕组件中有一个Test 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

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

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

Flatlist组件中的多个文件的本机导航

1 个答案: