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;

通过导出该函数或 class 您可以使用以下命令将其导入任何 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';

React Native - 如何重用文件？

React Native - How to re-use files?

code-reuse

code-structure

react-native

创建文件例如：Header.js