[英]How to access js files from components folder in React Native ios project
I am unable to access components folder in React Native Project IOS. 我无法访问React Native Project IOS中的组件文件夹。
I am getting following error: 我收到以下错误:
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. 无法从...... / ReactNative / ReactNativeProject / components / App.js解析模块./Login:无法在其模块映射或....... / ReactNative下的任何node_modules目录中找到此模块/ReactNativeProject/components/Login.j及其父目录。
I have referred following link: http://caroaguilar.com/post/react-native-navigation-tutorial/ 我已经提到以下链接: http : //caroaguilar.com/post/react-native-navigation-tutorial/
index.ios.js (ReactNativeProject/index.ios.js) 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) 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) 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;
I have tried this so far and got the solution for this. 到目前为止,我已经尝试过这个并得到了解决方案。
One mistake I did in App.js : 我在App.js中犯了一个错误:
I have replaced var Login = require('./Login');
我已经替换了var Login = require('./Login');
by 通过
import Login from './Login';
The js files under components folder also changed as follows, except App.js 组件文件夹下的js文件也更改如下,App.js除外
Changes in Login.js: Login.js中的更改:
class Login extends Component {
}
changed to 变成
class Login extends React.Component {
}
Well I did this way to import js
files from 1 back root directory and root directory of entire project structure. 那么我这样做是从1个后台根目录和整个项目结构的根目录导入js
文件。
I have following directory structure. 我有以下目录结构。
App.js
file at root directory
root directory
App.js
文件
Splash.js
file at MyApp -> Splash -> Splash.js
MyApp -> Splash -> Splash.js
Splash.js
文件MyApp -> Splash -> Splash.js
Home.js
file at MyApp -> Home -> Home.js
Home.js
文件在MyApp -> Home -> Home.js
TextViewComponent
file at MyApp -> CustomComponents -> TextViewComponent.js
MyApp -> CustomComponents -> TextViewComponent.js
TextViewComponent
文件MyApp -> CustomComponents -> TextViewComponent.js
How I accessed all files across the all files. 我如何访问所有文件中的所有文件。
Hope this would help you too. 希望这对你也有帮助。
Done. 完成。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.