web-dev-qa-db-de.com

Zugriff auf JS-Dateien aus dem Komponentenordner im React Native ios-Projekt

Ich kann in React Native Project IOS nicht auf den Komponentenordner zugreifen.

Ich erhalte folgenden Fehler:

Modul ./Login von ....../ReactNative/ReactNativeProject/components/App.js kann nicht aufgelöst werden: Dieses Modul kann nicht in der Modulzuordnung oder in einem der node_modules-Verzeichnisse unter ......./ReactNative gefunden werden /ReactNativeProject/components/Login.j und die übergeordneten Verzeichnisse.

Ich habe auf folgenden Link verwiesen: 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.js (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;
5
BK19

Ich habe das bisher ausprobiert und die Lösung dafür gefunden.

Ein Fehler, den ich in App.js gemacht habe:

Ich habe var Login = require('./Login'); ersetzt

durch

import Login from './Login';

Die js-Dateien im Komponentenordner haben sich ebenfalls wie folgt geändert, mit Ausnahme von App.js

Änderungen in Login.js:

class Login extends Component {
   }

gewechselt zu

class Login extends React.Component {
}
4
BK19

Nun, ich habe auf diese Weise js Dateien aus 1 zurück Root-Verzeichnis und Root-Verzeichnis der gesamten Projektstruktur importiert.

Ich habe folgende Verzeichnisstruktur.

App.js Datei bei root directory

Splash.js Datei bei MyApp -> Splash -> Splash.js

Home.js Datei bei MyApp -> Home -> Home.js

TextViewComponent Datei bei MyApp -> CustomComponents -> TextViewComponent.js

Wie ich auf alle Dateien über alle Dateien zugegriffen habe.

 enter image description here

Hoffe das würde dir auch helfen.

Fertig

1
Hiren Patel