在 React native 中更改组件文件位置不会显示在主应用程序中

Question

如果有人能帮助我，我将不胜感激，我正在学习 React Native 并在更改文件结构时面临问题。

我有两个文件，App（主文件）和 Welcomescreen。当两者都在主项目文件夹中时，我可以将 WelcomeScreen 导入 App 文件及其显示。但是，当我将 Welcomescreen 放在名为“Appo>screens>welcomescreen.js”的新文件夹中时，应用程序文件显示白页且没有错误。我也更新了导入 link。

感谢您的帮助，请查看代码和文件结构：

应用文件：

import Welcomescreen from './appo/screens/welcomescreen';


const App = () =>  {
  return (
     <Welcomescreen />
      );
    }

 
  
export default App;

欢迎屏幕文件：

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

 function WelcomeScreen() {
    
    return (
      <View style={styles.container}>
        <Text>Hello Welcome Screen!</Text>
      </View>
    );
  }

  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: 'blue',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });
 export default WelcomeScreen;`

directory image

Answer 1

据我所知，您移动的文件缺少导入。

欢迎画面

React 需要导入并在范围内呈现 JSX
StyleSheet 需要从 `react-native'

代码

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';

function WelcomeScreen() {
  return (
    <View style={styles.container}>
      <Text>Hello Welcome Screen!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'blue',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default WelcomeScreen;

应用程序

React 需要导入并在范围内呈现 JSX

代码

import * as React from 'react';
import Welcomescreen from './appo/screens/welcomescreen';

const App = () => {
  return <Welcomescreen />;
};

export default App;

Expo snack

在 React native 中更改组件文件位置不会显示在主应用程序中

Changing Component File location in React native does not show in main App

reactjs

react-native