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

Question

我有以下课程，我如何在 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>
    );
  }
}

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

Answer 1

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

• 导出

  您可以export 多个 const or class 并在导入语句中使用{} 导入它们。

• 导出默认值

  export default 使用的关键字从文件中导出 const 或 class。导出默认仅适用于一个文件。

• 导入

  import 关键字用于导入导出的文件，文件路径后跟from关键字

  import ExportWithDefault, {ExportWithOutDefault} from './fileName.js'

参考：import，export, export default

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

//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>
    );
  }
}

导出类 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>
         )
       }
    }