使用 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 文件中导入 useNavigation。

像这样：

import { useNavigation } from "@react-navigation/core";

然后你必须使用它并将它保存在一个变量中，如：

const navigation = useNavigation();

现在使用：

onPress={() => navigation.navigate('Home')};

这将导航到另一个屏幕。

确保使用 npm 或 yarn 安装项目中使用的每个库。

Answer 2

看来是个很简单的问题，我自己搞定了。 Test.js 中的代码在导入语句中缺少“Button”。正确的方法应该是：

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

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

尽管如此，代码现在可以正常工作了。

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

Switching Between Screens with React Native Navigation and importing JS

javascript

jsx

react-native

expo

react-native-tabnavigator