React Native之導出
1 React Native里面一般導出函數(shù)或者常量或者組件
如果是默認組件或者類(export default修飾)的話,在另外一個地方導入的時候不需要加上{},格式如下
導出
export default class Student {
}
導入
import Student from "./file"
如果不是默認組件或類或則方法或則變量(沒有用default修飾)的話,在另外一個地方導入的時候需要加上{},格式如下
導出:使用module.exports
module.exports = {fun1, fun2, 常量}
導入
import {xxx2, xxx2, ...} from "./file"
好處:在另外一個文件地方導入了,就可以使用導入的函數(shù)或者變量或者組件,非常方便,相當于java里面的import導入類文件一樣.
還可以是用一個變量,然后變量里面放鍵值對數(shù)組,key是函數(shù)名字,value是函數(shù)實現(xiàn)
如下
let fun = {fun1 : (a, b) => {return a + b}, fun2 : (a, b) => {return a - b}}
export default fun;
2 簡單測試
Student.js文件如下
'use strict';
import React from 'react'
class Student {
constructor(name: string) {
this.name = name;
}
_getName = () => {
console.log("_getName");
return this.name;
};
}
export default Student
Fun.js文件如下
'use strict';
import React from 'react'
const sum = (a, b) => {
return a + b;
}
const sub = (a, b) => {
return a - b;
}
const myName = 'chenyu';
module.exports = {
sum,
sub,
myName
}
Fun_second.js文件如下
'use strict';
import React from 'react'
//我們把所有的函數(shù)放在一個變量里面,這個變量里面放的都是鍵值對,
//然后key是函數(shù)名字,value是我們函數(shù)實現(xiàn)
let fun = { //記得這是是let fun = { },不是let fun {}
//相加函數(shù)
sum : (a, b) => {
return a + b;
},
//相減函數(shù)
sub : (a, b) => {
return a - b;
}
}
export default fun;
App.js文件如下
import React from 'react';
import {View, Text} from 'react-native';
import {DeviceEventEmitter} from "react-native";
import Student from "./Student"
import {sub, sum, myName} from "./Fun"
import fun from "./Fun_second"
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
name: '點擊我',
sumRes: 'sumRes',
subRes: 'subRes',
stuName: 'hello',
sumRes_sec: 'sumRes_sec',
subRes_: 'subRes_'
};
}
render() {
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text
onPress={() => this._press(5, 2)}
>{this.state.name}</Text>
<Text>{this.state.sumRes}</Text>
<Text>{this.state.subRes}</Text>
<Text>{this.state.stuName}</Text>
<Text>{this.state.sumRes_sec}</Text>
<Text>{this.state.subRes_}</Text>
</View>
);
}
_press = (a, b) => {
this.setState({name: myName});
let res = sum(a, b);
console.log("res is:" + res);
this.setState({sumRes : res});
let res1 = sub(a, b);
console.log("res1 is:" + res1);
this.setState({subRes : res1});
let student = new Student("chengongyu");
let studentName = student._getName();
this.setState({stuName : studentName});
let sumSec = fun.sum(4, 9);
this.setState({sumRes_sec : sumSec});
let subSec = fun.sub(10, 2);
this.setState({subRes_: subSec});
}
}
3 運行結果
點擊 '點擊我'之后效果如下
作者:chen.yu
深信服三年半工作經(jīng)驗,目前就職游戲廠商,希望能和大家交流和學習,
微信公眾號:編程入門到禿頭 或掃描下面二維碼
零基礎入門進階人工智能(鏈接)