Cách truy cập tệp js từ thư mục thành phần trong dự án React Native ios

Question

Tôi không thể truy cập thư mục thành phần trong React Native Project IOS.

Tôi nhận được lỗi sau:

Unable to resolve module ./Login from ....../ReactNative/ReactNativeProject/components/App.js: Unable to find this module in its module map or any of the node_modules directories under ......./ReactNative/ReactNativeProject/components/Login.j and its parent directories.

Tôi đã gọi theo liên kết: http://caroaguilar.com/post/react-native-navigation-tutorial/

index.ios.js (ReactNativeProject/index.ios.js)

"use strict"; 

import React, { AppRegistry } from 'react-native'; 
import App from './components/App'; 

AppRegistry.registerComponent('ReactNativeProject',() => App); 

App.j s (ReactNativeProject/components/App.js)

'use strict' 

    import React, {Component} from 'react'; 
    import { 
     AppRegistry, 
     StyleSheet, 
     NavigatorIOS, 
    } from 'react-native'; 
    var Login = require('./Login'); 

    class App extends Component { 
     render() { 
      return (
       <NavigatorIOS 
       style={styles.navigationContainer} 
       initialRoute={{ 
       title: "Login Page", 
       component: Login, 
       }} /> 
     ); 
     } 
    } 

    var styles = StyleSheet.create({ 
     navigationContainer: { 
      flex: 1 
     } 
    }); 

    export default App; 

Login.js (ReactNativeProject/components/Login.js)

"use strict"; 
    import React, {Component} from 'react'; 
    import { 
     StyleSheet, 
     Text, 
     TextInput 
    } from 'react-native'; 
    import Button from 'react-native-button'; 
    import styles from './login'; 


    class Login extends Component { 

     constructor(props) { 
      super(props); 
      this.state = { 
       username: "", 
       password: "", 

      }; 
     } 

     render() { 
      return (

       <View style={styles.container}> 
        <View style={styles.textContainer}> 
         <TextInput 
          style={styles.inputUsername} 
          placeholder="Enter email ID" 
          value={this.state.username} 
          clearButtonMode = 'while-editing'/> 
         <TextInput 
          style={styles.inputPassword} 
          placeholder="Enter Password" 
          value={this.state.password} 
          password={true} 
          secureTextEntry={true} 
          clearButtonMode = 'while-editing' /> 

        <Button style={styles.login} 
          styleDisabled={{color: 'red'}}> 
          Login 
         </Button> 
        </View> 
       </View> 
      ); 
     } 

    module.exports = Login; 

Answer 1

Tôi đã thử này cho đến nay và có những giải pháp cho điều này.

Một sai lầm tôi đã làm trong App.js:

tôi đã thay thế var Login = require('./Login');

bởi

import Login from './Login'; 

Các tập tin js dưới thư mục thành phần cũng thay đổi như sau, trừ App.js

Thay đổi trong Login.js:

class Login extends Component { 
    } 

đổi thành

class Login extends React.Component { 
} 

Answer 2

Vâng, tôi đã làm theo cách này để nhập js tập tin từ 1 trở lại thư mục gốc và thư mục gốc của toàn bộ cấu trúc của dự án.

Tôi có cấu trúc thư mục sau.

App.js hồ sơ tại root directory

Splash.js hồ sơ tại MyApp -> Splash -> Splash.js

Home.js hồ sơ tại MyApp -> Home -> Home.js

TextViewComponent hồ sơ tại MyApp -> CustomComponents -> TextViewComponent.js

Làm thế nào tôi truy cập tất cả các file trên tất cả các tập tin.

Hy vọng điều này sẽ giúp bạn quá.

Xong.