React-native之自定义组件

1、自定义组件

• 在定义的组件中，将当前组建输出
  module.exports = 组件名称(创建的类名);

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

class customView extends Component {    
render() 
{        
    return (            
                       
           点点滴滴            
               
    );    
   }
}

const styles = StyleSheet.create(
{    
container: {        
flex: 1,        
justifyContent: 'center',        
alignItems: 'center',        
backgroundColor: '#F5FCFF',    
}});

module.exports = customView;

• 在要使用组件的模块当中使用
  var CustomView = require('引入组件的路径');
  此时就可以在当前模块中直接使用
  

var CustomView = require('./customView.js');
class Login extends Component {  
render() 
{    
    return (      
            
              
       
     );  
    }
}

2、可能存在的问题
invariant violation:expected a component class,got[object object]
在引入自定义控件的时候如果将变量名称写成小开头，引入的外部控件的变量定义必须是大写开头的
3、推荐使用(ES6的新语法)
由export和import关键字共同实现模块自定义

//通过export输出变量
export var a = 10;

var a = 10;
var b = 100;
export {a,b}

//通过export输出函数
export function test(){};

function test(){};
function test1(){};
export {test,test1};

//输出控件(类)
class DemoView extends Component{
    render(){
        return(
            
                多福多寿
            
        ); 
   }
}

//同时输出控件，变量和函数
export {DemoView,a,b,test,test1};

//export default输出到默认模块,但是每一个模块只能使
用一次export default

export default function test2(){}; 

//导入外部模块
import 默认模块,{非默认模块,...,} from '模块相对路径'

import test2,{a,b,test,test1};
//或者
import test2;
improt {a,b,test,test1};

//导入非默认模块(用export导出的变量，方法，类，出去
export default导出的)
import * as 模块新名称 from '模块相对路径'，然后在使用
时'模块新名称.要使用的模块'，不建议控件导入使用此方法

class HomeViewController extends Component{    render(){
        return(
            
                {demo.age}
                
            
        );
    }
}