如何在本机中包含来自另一个文件的组件的视图？

Posted 2021-04-02

我有以下类，我可以在php中包含另一个文件，如include（）。

class A extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>A</Text> 
      </View>
    );
  }
}

class B extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>B</Text>
      </View>
    );
  }
}

class C extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>B</Text>    
      </View>
    );
  }
}

我必须在外部文件中包含View。我们可以通过导入将一个类包含到另一个类但是视图呢？

答案

基本上，你有一个问题是关于导入文件。考虑三件事，

• 出口 你可以export多个const or class并导入它们与导入声明中的{}。
• 出口默认 export default关键字使用从文件导出const或class。导出默认值仅适用于一个文件。
• 进口 import关键字用于导入导出的文件，文件路径后跟from关键字 import ExportWithDefault, {ExportWithOutDefault} from './fileName.js'

参考文献：import，export, export default

让我们考虑组件A,B,C文件comps.js只导出为export。喜欢

//file comp.js


 import React,{Component} from 'react'
 import {View, Text} from 'react-native'
   export class A extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>A</Text> 
      </View>
    );
  }
}

export class B extends Component {render（）{return（B）; }}

export class C extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>C</Text>    
      </View>
    );
  }
}

现在考虑文件main.js是您要导入A,B,C并显示的文件。

import React, { Component} from 'react
import { View} from 'react-native
import {A,B,C} from './comp'; //considering both files in same directory
    class Main extends Component {
       render(){
         return(
         <View>
            <A/>
            <B/>
             <C/>
           </View>
         )
       }
    }