Как вынести этот код в отдельный файл Header.js?

Чтобы вынести код, отвечающий за верхнюю часть экрана (header) в отдельный файл Header.js в React Native, следуйте следующим шагам:

1. Создайте новый файл Header.js в том же каталоге, где находится ваш компонент экрана.
2. Откройте новый файл Header.js и введите следующий код:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const Header = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Здесь находится заголовок</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'lightblue',
  },
  text: {
    fontSize: 20,
    fontWeight: 'bold',
    color: 'white',
  },
});

export default Header;

3. Сохраните файл Header.js.

4. Теперь вернитесь к компоненту экрана, где ранее находился код верхней части экрана, который вы хотите вынести в отдельный файл.

5. В верхней части файла компонента экрана импортируйте компонент Header из файла Header.js:

import Header from './Header';

6. Внутри функционального компонента экрана, где находился код верхней части экрана, замените этот код на использование компонента Header:

...
return (
  <View style={styles.container}>
    <Header />
    {/* Остальной код вашего экрана */}
  </View>
);
...

7. Сохраните файл экрана.

Теперь код, отвечающий за верхнюю часть экрана, находится в отдельном файле Header.js и импортируется в нужный компонент вместо встраивания в него. Это может сделать код более читаемым, упростить его поддержку и повторное использование.