一:module.exports与exports 的区别
RN 首先组件的导出有两种方式 module.exports与exports 前者是ES5 写法 后者是ES6 写法,所以如果用ES5 导出一定要保持用ES5方式的引用方法 不然会报错的
因为
- module.exports 初始值为一个空对象 {}
- exports 是指向的 module.exports 的引用
- 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,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,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';
主意:
原文链接:https://www.f2er.com/react/304327.html