使用React Native Navigation在屏幕之间切换并导入JS

Question

我很难弄清楚为什么我的代码不起作用。我一直在看教程，但没有什么帮助。如何在屏幕之间切换，并将屏幕放在不同的JS文件中(作为组件(？

目前，我的代码适用于第一个屏幕，但当我点击按钮时，什么都不会显示。

请参阅以下代码：

App.js

import * as React from 'react';
import {Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import TestScreen from './components/Test';

//HOME SCREEN
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Test"
onPress={() => navigation.navigate('Test',{myParam: '03',})}
/>
</View>
);
}
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Test" component={TestScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;

Test.js

import React, { Component } from "react";
import { Text, View } from "react-native";
class Test extends Component {
render() {
const { navigation } = this.props;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Test Screen</Text>
<Button
title="Test"
onPress={() => navigation.navigate('Home')}
/>
</View>
);
}
}   

export default Test;

Answer 1

这似乎是一个非常简单的问题，我自己解决了。Test.js中的代码在导入语句中缺少">Button"。正确的方法应该是：

import { Button, Text, View } from "react-native";

这是一个愚蠢的错误，但这不是我第一次遇到这种情况。我使用Visual Studio代码，它突出显示缺失的连接，但似乎这对某些组件不起作用。更不用说它编译(绑定(没有问题。

尽管如此，代码现在运行良好。