1、自定義組件

• 在定義的組件中，將當(dāng)前組建輸出
  module.exports = 組件名稱(創(chuàng)建的類名);

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

class customView extends Component {    
render() 
{        
    return (            
       <View style={styles.container}>                
           <Text>點(diǎn)點(diǎn)滴滴</Text>            
       </View>        
    );    
   }
}

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

module.exports = customView;

• 在要使用組件的模塊當(dāng)中使用
  var CustomView = require('引入組件的路徑');
  此時(shí)就可以在當(dāng)前模塊中直接使用
  <CustomView/>

var CustomView = require('./customView.js');
class Login extends Component {  
render() 
{    
    return (      
    <View style={styles.container}>        
        <CustomView></CustomView>      
    </View>   
     );  
    }
}

2、可能存在的問題
invariant violation:expected a component class,got[object object]
在引入自定義控件的時(shí)候如果將變量名稱寫成小開頭，引入的外部控件的變量定義必須是大寫開頭的
3、推薦使用(ES6的新語法)
由export和import關(guān)鍵字共同實(shí)現(xiàn)模塊自定義

//通過export輸出變量
export var a = 10;

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

//通過export輸出函數(shù)
export function test(){};

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

//輸出控件(類)
class DemoView extends Component{
    render(){
        return(
            <View style={{backgroundColor: 'white'}}>
                <Text>多福多壽</Text>
            </View>
        ); 
   }
}

//同時(shí)輸出控件，變量和函數(shù)
export {DemoView,a,b,test,test1};

//export default輸出到默認(rèn)模塊,但是每一個(gè)模塊只能使
用一次export default

export default function test2(){}; 

//導(dǎo)入外部模塊
import 默認(rèn)模塊,{非默認(rèn)模塊,...,} from '模塊相對(duì)路徑'

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

//導(dǎo)入非默認(rèn)模塊(用export導(dǎo)出的變量，方法，類，出去
export default導(dǎo)出的)
import * as 模塊新名稱 from '模塊相對(duì)路徑'，然后在使用
時(shí)'模塊新名稱.要使用的模塊'，不建議控件導(dǎo)入使用此方法

class HomeViewController extends Component{    render(){
        return(
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'white'}}>
                <Text style={styles.TextStyle}>{demo.age}</Text>
                <demo.DemoView></demo.DemoView>
            </View>
        );
    }
}