无法在React Native中导入其他组件

时间:2017-06-20 02:00:05

标签: javascript android reactjs react-native react-native-android

最近我开始学习如何使用React Native构建移动应用程序,我从我的一位朋友那里听到了它,我真的很感兴趣。但现在我遇到了错误,并试图从谷歌搜索解决方案,但没有一个可以解决我的问题。我的问题是,当我将其他组件导入 index.android.js 时,它在移动设备屏幕上显示错误=>

  

开发服务器返回响应错误代码:500

我的组件存储在 android =>文件夹中 的机器人/应用/组件/ Bar.js

我像这样导入了它

  

从'./app/components/Bar'导入栏;

index.android.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  View
} from 'react-native';

import Bar from './app/components/Bar';
export default class ProfilePageApp extends Component {
  render() {
    return (
      <View style={styles.container}>

          <Bar />

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
  }
});

AppRegistry.registerComponent('ProfilePageApp', () => ProfilePageApp);

Bar.js

import React, { Component } from 'react';
import {
  View,
  Text
} from 'react-native';


 class Bar extends Component {
  render() {
    return (
      <View style={styles.container}>

          <Text>Hello world</Text>

      </View>
    );
  }
}

export default Bar;

错误

enter image description here

1 个答案:

答案 0 :(得分:1)

我不确定RN在文件目录约定方面是如何工作的,但我认为它与React等其他人几乎相同。但是当我阅读您的代码时,我认为您错过了./android声明中的import

你提到了:

  

我的组件存储在android =&gt;文件夹中   机器人/应用/组件/ Bar.js

但你这样导入它:

import Bar from './app/components/Bar';

你试过吗

import Bar from './android/app/components/Bar';