React-Native 使用 navigation.navigate() 進行導航

Question

我有一個簡單的本機反應應用程序，我需要在單擊按鈕時導航到某個組件 (ViewDrafts)。

我試過這個並且顯示了很多錯誤

const App = ({ navigation }) => {
//some code written here.
return (
    <SafeAreaView style={styles.body}>
        <View style={styles.container}>
          <Text style={styles.title}>
            Hi there! {"\n"}Welcome to Invoice Creator
          </Text>
          <TouchableOpacity style={styles.button} onPress={toggleVisible}>
            <Text style={styles.content}>Create Invoice</Text>
          </TouchableOpacity>
          <Text></Text>
          <TouchableOpacity
            style={styles.button}
            onPress={() => navigation.navigate("ViewDrafts.js")}
          >
            <Text style={styles.content}>View Drafts</Text>
          </TouchableOpacity>
        </View>
...
    </SafeAreaView>
  );
};

正如你在這里看到的

 <TouchableOpacity
     style={styles.button}
     onPress={() => navigation.navigate("ViewDrafts.js")}
     >
    <Text style={styles.content}>View Drafts</Text>
 </TouchableOpacity>

但它不起作用？ 有什么想法嗎？

Answer 1

您是否閱讀了“ react-native-navigation ”文檔？
您導航到屏幕名稱，而不是它的文件路徑。

它應該看起來像這樣：

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Home from './screens/Home';
import ViewDrafts from './screens/ViewDrafts';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="ViewDrafts" component={ViewDrafts} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

然后你像這樣導航到它：

 <TouchableOpacity
     style={styles.button}
     onPress={() => navigation.navigate("ViewDrafts")} // <--- CHANGED
 >
    <Text style={styles.content}>View Drafts</Text>
 </TouchableOpacity>