React Native 之组件的导出

一：module.exports与exports 的区别

RN 首先组件的导出有两种方式    module.exports与exports  前者是ES5 写法  后者是ES6 写法，所以如果用ES5 导出一定要保持用ES5方式的引用方法  不然会报错的

因为

1. module.exports 初始值为一个空对象 {}
2. exports 是指向的 module.exports 的引用
3. require() 返回的是 module.exports 而不是 exports

所以如果用 module.exports 导出组件  在其它组件引用时候用 require  如：

loginView.js 文件

class loginView extends Component {
    render() {
        return (
            <View style={styles.container}>
              .....
            </View>
        );
    }
}
// 输出类
module.exports = loginView;

在index.android.js中 引用如下

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

// 引入外部的js文件
let LoginView = require('./loginView');

class BTextInputDemo extends Component {
  render() {
    return (
       <LoginView />
    );
  }
}


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

ES6 的写法  loginView

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


export default class loginView extends Component {
  
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React 123!
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});

index.android.js 文件

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

import LoginView from "./loginView";

export default class CQQLoginDemo extends Component {
  render() {
    return (
      <LoginView/>
    );
  }
}

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

二：export 与 export  default 的区别

export 可以在单个js文件中 导出多个组件

   例如：

  export class Template{}
  export class AnotherTemplate{}

 

这样在其他文件引用时，需要使用{}符号且组件名称必修和class名称一样，像这样子：

import {Template,AnotherTemplate} from './components/Templates';

而加default时，例如：

export default class Template{}

然后在其他文件引用，像这样子：

import Template from './components/Templates';

你也可以为这个组件另起一个别名，像这样子：

import TheTemplate from './components/Templates';

但是每个文件里只能有一个default组件，可以包含其他非default组件：

export default class Template{}
export class AnotherTemplate{}

然后引用的时候，如下：

import Template,{AnotherTemplate} from './components/Templates';

主意：

• 有default和没有default的区别在于：有default在引用时可以自定义名称，而没有default时需要使用{}括起来且名称必修和class名称一致
• 每个文件里只能有一个default组件，但可以有多个非default组件