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

Question

我有以下 classes 如何从另一个文件中包含视图，例如 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>
    );
  }
}

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

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

export class B 扩展组件 { 使成为（） { return ( 乙 ); } }

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

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

How to include view to component from another file in react native?

import

class

view

include

react-native