Question

我正在尝试学习React Native导航。这是我的App.js，并且按预期工作正常：

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

class App extends Component {

  HomeScreen() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }

  render() {
    return (
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen name="Home" component={this.HomeScreen} />
          </Stack.Navigator>
        </NavigationContainer>
    )
  }
}

const Stack = createStackNavigator();

export default App;

在这里，我已经在App.js文件本身中定义了HomeScreen。但是，如果我想将其定义为另一个文件（例如HomeScreen.js）中的独立组件，怎么办-

import React, { Component } from 'react';
import { View, Text } from 'react-native';

class HomeScreen extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    )
  }
}

export default HomeScreen;

如何在App.js中导入和使用该HomeScreen？我已经尝试过import HomeScreen from './components/HomeScreen'和<Stack.Screen name="Home" component={HomeScreen} />，但这给我一个错误，指出它不是组件。我知道这是一个简单的基本问题，但是到目前为止，我还无法在任何地方找到答案。我应该使用其他导航库来解决此问题吗？

Answer 1

我修复了它。我试图做的是给组件值JSX样式，例如component={<HomeScreen />}，但应该只是component={HomeScreen}。

如何从另一个文件获取React Native导航负载组件？

1 个答案: