React Native-如何重用文件？

Question

我有设计页眉，页脚视频播放器视图等作为单独的文件。如何在每页中包含这些内容？

我尝试过这种方法。但不起作用。

Answer 1

请按照以下步骤操作：

创建一个文件，例如：Header.js

import React, { Component } from 'react'
import { Text, View } from 'react-native'

class Header extends Component {
  render() {
    return (
      <View>
        <Text> Header Component </Text>
      </View>
    )
  }
}

导出该组件或功能以在其他文件中重复使用。

export default Header;

通过导出该函数或类，您可以使用以下命令将其导入任何js文件中：

import Header from './Header.js'

要么

import Header from './Header'

这是在其他文件中使用导入的组件的方法：

import React, { Component } from 'react'
import { Text, View } from 'react-native'
import Header from './Header'  // import that

class App extends Component {
  render() {
    return (
      <View>
        <Header />  // use like this
        <Text> textInComponent </Text>
      </View>
    )
  }
}

如果要在单个文件中导出多个组件或功能，则不能export default全部使用。您只需要使用export。

像这样：Common.js文件

export Header;
export Button;

或者您可以像这样使用

import { Header, Button } from './Common';