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)驗,目前就職游戲廠商,希望能和大家交流和學習,
微信公眾號:編程入門到禿頭 或掃描下面二維碼
零基礎入門進階人工智能(鏈接)