Question

在我开始之前，我想说的是，还有其他问题也有类似的问题，但这些解决方案都不适合我。我今天才刚开始使用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中可以找到的几乎所有内容，但没有任何帮助，可能是因为这些答案中的代码不同并且我不明白如何使其适用于我。

Answer 1

您没有导航参数，请更改线

export default function HomePage() {

到

export default function HomePage({navigation}) {

它将起作用。

Answer 2

或者在使用[2020-07-09 00:55:09,257] ERROR Error while renaming dir for topic-ack-all-0 in log dir C:\kafkalogs\kafka-logs-3 (kafka.server.LogDirFailureChannel) java.nio.file.AccessDeniedException: C:\kafkalogs\kafka-logs-3\topic-ack-all-0 -> C:\kafkalogs\kafka-logs-3\topic-ack-all-0.48575004e6514c2eba6b8020a07dced5-delete at sun.nio.fs.WindowsException.translateToIOException(WindowsException.java:83) at sun.nio.fs.WindowsException.rethrowAsIOException(WindowsException.java:97) at sun.nio.fs.WindowsFileCopy.move(WindowsFileCopy.java:387) at sun.nio.fs.WindowsFileSystemProvider.move(WindowsFileSystemProvider.java:287) at java.nio.file.Files.move(Files.java:1395) at org.apache.kafka.common.utils.Utils.atomicMoveWithFallback(Utils.java:834) at kafka.log.Log.$anonfun$renameDir$2(Log.scala:985) at kafka.log.Log.renameDir(Log.scala:2337) at kafka.log.LogManager.asyncDelete(LogManager.scala:925)时可以使用withNavigation。

class component

在React Native Expo上找不到变量导航

2 个答案: