React Native - 如何重用文件

Question

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

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

Answer 1

按照以下步骤操作：

创建一个文件，例如：标题.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。

像这样：普通.js文件

export Header;
export Button;

或者你可以像这样使用它。

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