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'

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 file

export Header;
export Button;

или вы можете использовать это так.

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