React Native - 如何重用文件？

Question

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

我尝试了this方法。但不起作用。

Answer 1

请按照以下步骤操作：

Create a file eg: 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';