Je ne parviens pas à accéder au dossier des composants dans React Native Project IOS.
Je reçois l'erreur suivante:
Impossible de résoudre le module ./Login à partir de ....../ReactNative/ReactNativeProject/components/App.js: impossible de trouver ce module dans sa mappe ou dans l'un des répertoires node_modules sous ......./ReactNative /ReactNativeProject/components/Login.j et ses répertoires parents.
J'ai mentionné le lien suivant: 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;
J'ai essayé cela jusqu'à présent et j'ai trouvé la solution.
Une erreur que j'ai commise dans App.js :
J'ai remplacé var Login = require('./Login');
par
import Login from './Login';
Les fichiers js du dossier composants ont également changé comme suit, sauf App.js
Changements dans Login.js:
class Login extends Component {
}
changé en
class Login extends React.Component {
}
Eh bien, j’ai procédé ainsi pour importer des fichiers js
à partir de 1 répertoire racine arrière et répertoire racine de la structure de projet complète.
J'ai la structure de répertoire suivante.
App.js
fichier à root directory
Splash.js
fichier à MyApp -> Splash -> Splash.js
Home.js
fichier à MyApp -> Home -> Home.js
fichier TextViewComponent
à MyApp -> CustomComponents -> TextViewComponent.js
Comment j'ai accédé à tous les fichiers de tous les fichiers.
J'espère que cela vous aidera aussi.
Fait.