React native/navigation错误显示组件/组件未定义

Question

我最近对react-js有点厌倦，想尝试react native，我遵循了youtube上使用react导航的教程，在创建我的应用程序开始时(实际上是创建我的第一个组件时)我得到了一个错误

• 首先我得到了一个错误，说Text strings must be rendered within a <Text> component.但我的字符串是在一个文本组件

• 然后我尝试做一个组件，只是返回空<View></View>，但得到一个错误:

variant Violation: View config getter callback for component `div` must be a function (received `undefined`)我得出结论，错误是来自组件本身，而不是文本

• 最后我在论坛上看到它可能来自一个糟糕的导入，即使我确信它是正确导入的，我尝试在我的app.js中声明我的组件，所以不需要导入，但同样的错误发生

下面是我的代码:

import { createStackNavigator } from "@react-navigation/stack";
import { NavigationContainer} from "@react-navigation/native";
import { View } from "react-native-web";
const Stack = createStackNavigator();
const Home = () => {
return (
<View>
<Text>Home</Text>
</View>
);
};

const App = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={Home} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;

在教程中，我跟随的家伙使用react导航6，但调用函数createStackNavigator()

在官方文档https://reactnavigation.org/docs/hello-react-navigation中，他们使用createNativeStackNavigator而不是createStackNavigator(这是v5)，我尝试删除我的节点模块，安装正确的npm包，验证版本，然后遵循本文档，但我仍然得到相同的错误

Answer 1

您应该使用createNativeStackNavigator代替，并且您还需要导入Text，因为您只有View。确保从"React - Native"而不是"React - Native -web"中导入React Native组件。做所有这些解决了你的问题，我现在可以看到显示的文本:

import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { NavigationContainer } from "@react-navigation/native";
import { View, Text } from "react-native";
const Stack = createNativeStackNavigator();
const Home = () => {
return (
<View>
<Text>Home</Text>
</View>
);
};
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={Home} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;