使用 navigation.navigate() 的 React-Native 导航答案

【问题标题】：React-Native Navigation using navigation.navigate()使用 navigation.navigate() 的 React-Native 导航
【发布时间】：2020-09-21 08:42:20
【问题描述】：

我有一个简单的反应原生应用程序，我需要在按钮单击时导航到某个组件（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>

但它不起作用！请问有什么想法吗？

【问题讨论】：

你能告诉我们你是如何初始化导航的吗？堆栈 n 以便我们可以帮助您
能不能给我们看一次你的导航栈，你需要给导航栈中的组件名，而不是文件名navigation.navigate("ViewDrafts")}

标签： reactjs react-native navigation

【解决方案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>

【讨论】：

哦，好吧，应该是这样，但我有一个错误。尝试注册两个具有相同名称的视图 RNCSafeAreaProvider 无论如何可以解决这个问题？
当我这样做时，它会出现此错误尝试注册两个具有相同名称的视图 RNCSafeAreaProvider 当我添加导航时出现此错误，或者更具体地说，当我添加 import { NavigationContainer } from '@react-navigation /本国的';从'@react-navigation/stack'导入{ createStackNavigator }；这两个进口
你在 App.js 中添加了 SafeAreaProvider 吗？？
没有。阅读文档并遵循它。任何其他实现 RN 组件的方式都不好。