react-native - 将 home.js 导入 react-native app.js 失败并出现错误无法解析 home.js

Question

我正在构建一个 react-native 应用程序，其中包含一个 screen home.js 文件，方法screens/home.js是使用 import Home from 导入./screens/home.js；在 App.js iam 中使用 expo cli 当我运行 expo start --web 错误时无法解决./screens/home.js。我确定路径和文件名。可能是什么问题

应用程序.js

 import React ,{useState}from 'react';
    //import { View, Text } from 'react-native';
    import Home from './screens/home';
    import * as font from 'expo-font';
    import {AppLoaded} from 'expo';

    const getFonts=()=>{
      return Font.loadASync({
       'nunito-regular':require('./assets/fonts/Nunito-Regular.ttf'),
       'nunito-bold':require('./assets/fonts/Nunito-Bold.ttf'),
      })

    }

    export default function App() {
      const [fontsLoaded,setFontsLoaded]=useState(false);  
       if(fontsLoaded){
          return(
            <Home/>
          );
        }
        else{
          return(
            < AppLoaded 
            startASync={getFonts}
            onFinish={()=>setFontsLoaded(true)}
            />
          )
        }
    }

屏幕/home.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { render } from 'react-dom';

export default function Home() {
  render(){
     return (
        <View style={styles.container}>
            <Text style={styles.titleText}>Home Screen</Text>
         </View> 
  );
}
}
const styles = StyleSheet.create({
  container: {
    padding:24,
  },
  titleText:{
    fontFamily:'nunito-bold',
    fontSize:18,
  }
});

标签： react-nativescreencustom-font

Answer 1

从主屏幕中删除渲染方法对您的代码进行了一些更改尝试执行以下操作：

import React ,{useState}from 'react';
import Home from './screens/Home';
import * as font from 'expo-font';
import {AppLoaded} from 'expo';


export default function App() {
    return(
        <Home/>
    ) 
}

和 home.js 到

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


export default function Home() {

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