React-native之自定义组件

1、自定义组件

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

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

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

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

module.exports = customView;

在要使用组件的模块当中使用
var CustomView = require('引入组件的路径');
此时就可以在当前模块中直接使用
<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]
在引入自定义控件的时候如果将变量名称写成小开头，引入的外部控件的变量定义必须是大写开头的
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(
            <View style={{backgroundColor: 'white'}}>
                <Text>多福多寿</Text>
            </View>
        ); 
   }
}

//同时输出控件，变量和函数
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(
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'white'}}>
                <Text style={styles.TextStyle}>{demo.age}</Text>
                <demo.DemoView></demo.DemoView>
            </View>
        );
    }
}

React-native之自定义组件

推荐阅读更多精彩内容