在反应原生博览会中找不到变量导航答案

【问题标题】：Can’t find variable navigation in react native expo在反应原生博览会中找不到变量导航
【发布时间】：2020-07-02 12:09:52
【问题描述】：

在我开始之前，我想说还有其他问题已经得到解答，它们有类似的问题，但这些解决方案都不适合我。我今天刚开始使用 React Native Expo，我发现导航部分有点困难。看一下代码：

App.js

import React, { Component } from 'react';
import HomePage from './HomePage'
import DetailsPage from './DetailsPage'
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>

        <Stack.Screen name="HomePage" component={HomePage} />
        <Stack.Screen name="DetailsPage" component={DetailsPage} />

      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

我有 2 个 .js 文件，它们代表我的应用程序的 2 个页面，以下是这些文件的代码：

HomePage.js

import React, { useState } from 'react';
import { StyleSheet, Text, View, SafeAreaView, FlatList, TouchableOpacity } from 'react-native';


export default function HomePage() {

    // Create a temporary list to populate the table view
    const [orders, setOrders] = useState([
        { company: 'Airbnb',  date: '20/02/2020', author: 'Mohammed Ajmal', itemOrdered: 'Sack Craft paper', id: '1' },
        { company: 'Apple',     date: '15/01/2020', author: 'Ilma Ajmal', itemOrdered: 'Multiwall paper sacks', id: '2' },
        { company: 'Google',    date: '30/12/2019', author: 'Rifka Ajmal', itemOrdered: 'Rigid paper sacks', id: '3' },
        { company: 'Facebook',  date: '29/06/2020', author: 'Fahim Khalideen', itemOrdered: 'Paper bags', id: '4' },
])

    return (
        <View style={styles.container}>
            <SafeAreaView>

                {/* Create the table view */}
                <FlatList
                style = {styles.tableView}
                data = {orders}
                keyExtractor = {(item) => item.id}

                renderItem = {({ item }) => (
                    <TouchableOpacity style = {styles.tableViewItem} onPress = {() => {
                        navigation.navigate('DetailsPage')
                    }}>

                        <Text style = {styles.companyName}>{ item.company }</Text>
                        <Text style = {styles.date}>{ item.date }  |  { item.author }</Text>
                        <Text style = {styles.itemOrdered}>{ item.itemOrdered }</Text>
                    </TouchableOpacity>
                )}
                />

            </SafeAreaView>
        </View>
    );
}
// Stylesheet

DetailsPage.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function DetailsPage() {
    return (
        <View style={styles.container}>
          <Text>Open up App.js to start working on your app!</Text>
          <StatusBar style="auto" />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

我正在尝试创建的是一个表格视图，当点击它时，它应该将用户带到详细信息页面，但我收到一条错误消息

找不到变量：导航

我几乎尝试了在 Stack Overflow 中可以找到的所有内容，但没有任何帮助，可能是因为这些答案中的代码不同，我不明白如何让它对我有用。

【问题讨论】：

标签： reactjs react-native expo react-navigation

【解决方案1】：

您没有用于导航更改的参数线

export default function HomePage() {

到

export default function HomePage({navigation}) {

它会起作用的。

【讨论】：

Duuuuuuuudeeee!!!!为这个男人苦苦挣扎了一整天? 非常感谢曼恩！

【解决方案2】：

或者您可以在使用class component 时使用withNavigation。

import { withNavigation } from 'react-navigation';
class DetailsPage extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <StatusBar style="auto" />
      </View>
    );
  }
}
export default withNavigation(DetailsPage);

【讨论】：