如何在 React Native 中将另一个文件的视图包含到组件中？

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

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

• 出口

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

• 导出默认值

  export default关键字使用 exportconst或classfrom 文件。导出默认值仅用于一个文件。

• 进口

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

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

参考：导入、导出、导出默认

让我们考虑仅导出组件A,B,C文件。喜欢comps.jsexport

//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 扩展组件 { 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>
         )
       }
    }