Question

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

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

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'

OR

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';

React Native-如何重用文件？

1 个答案:

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