Helpex - Trao đổi & giúp đỡ Đăng nhập

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

Lê Ðông Hải
· 06:43 22/09/2016
09:42:59 12/06/2021

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

Tôi gặp lỗi sau:

Không thể giải quyết mô-đun ./Login from ...... / ReactNative / ReactNativeProject / components / App.js: Không thể tìm thấy mô-đun này trong bản đồ mô-đun của nó hoặc bất kỳ thư mục node_modules nào trong ....... / ReactNative /ReactNativeProject/components/Login.j và các thư mục mẹ của nó.

Tôi đã tham khảo liên kết sau: 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;
6 hữu ích 0 bình luận 23k xem chia sẻ
Hoàng Anh Ðức
· 08:25 22/09/2016
08:25:16 22/09/2016

Tôi đã thử điều này cho đến nay và đã có 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 js trong thư mục thành phần cũng thay đổi như sau, ngoại trừ App.js

Những thay đổi trong Login.js:

class Login extends Component {
   }

thay đổi để

class Login extends React.Component {
}
4 hữu ích 0 bình luận chia sẻ
Nguyễn Bằng Phi
· 06:21 09/03/2018
06:21:01 09/03/2018

Tôi đã làm theo cách này để nhập jstệp từ 1 thư mục gốc trở lạithư mục gốc của toàn bộ cấu trúc dự án.

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

App.js nộp tại root directory

Splash.js nộp tại MyApp -> Splash -> Splash.js

Home.js nộp tại MyApp -> Home -> Home.js

TextViewComponent nộp tại MyApp -> CustomComponents -> TextViewComponent.js

Cách tôi truy cập tất cả các tệp trên tất cả các tệp.

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

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

Làm xong.

2 hữu ích 0 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ javascript ios node.js react-native react-native-android , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm