时间戳

首页 > 解决方案 > 如何让 React Native 导航加载来自另一个文件的组件？

javascript - 如何让 React Native 导航加载来自另一个文件的组件？

问题描述

我正在尝试学习 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;

这里我已经HomeScreen在 App.js 文件本身中定义了。但是，如果我想将它定义为另一个文件（比如 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;

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

标签： javascriptreact-nativereact-native-navigation

解决方案

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

推荐阅读