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>點點滴滴</Text>
</View>
);
}
}
const styles = StyleSheet.create(
{
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}});
module.exports = customView;
- 在要使用組件的模塊當(dāng)中使用
var CustomView = require('引入組件的路徑');
此時就可以在當(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]
在引入自定義控件的時候如果將變量名稱寫成小開頭类腮，引入的外部控件的變量定義必須是大寫開頭的
3、推薦使用(ES6的新語法)
由export和import關(guān)鍵字共同實現(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ù)
export {DemoView,a,b,test,test1};
//export default輸出到默認(rèn)模塊,但是每一個模塊只能使
用一次export default
export default function test2(){};
//導(dǎo)入外部模塊
import 默認(rèn)模塊,{非默認(rèn)模塊,...,} from '模塊相對路徑'
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 '模塊相對路徑'颠黎，然后在使用
時'模塊新名稱.要使用的模塊'另锋，不建議控件導(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>
);
}
}
