Прозрачный фон для заголовка с использованием createStackNavigator, React Native

Question

Я создал проект с использованием CRNA, который использует React-Navigation.На одном из экранов у меня есть фоновое изображение, которое покрывает весь экран, и я хочу включить заголовок.

Как это изображение:

Должен ли я просто скрыть заголовок и использовать View, содержащий нужный элемент?Если да, это вызовет какие-либо проблемы в случае глубокого связывания?

Решение

React Navigation предлагает классный реквизит headerTransparent, который можно использовать для визуализации чего-либо под заголовком.

Таким образом, код должен выглядеть следующим образом:

static navigationOptions = {
    headerTransparent: true
  }

Answer 1

Для достижения этого эффекта необходимо выполнить следующие шаги:

1. Изменить стиль заголовка навигации с абсолютным положением, прозрачным фоном и без рамки.
2. Использовать компонент ImageBackground какродительский компонент для вашего экрана с изображением, которое вы хотите использовать в качестве фона.
3. Добавьте верхнюю часть отступа к этому ImageBackground, чтобы исправить перекрытие.

Таким образом, ваш код должен выглядеть примерно такэто:

import React, {Component} from 'react';
import {
  StyleSheet,
  Button,
  ImageBackground,
  Platform,
} from 'react-native';
import {
  createStackNavigator,
} from 'react-navigation';


class HomeScreen extends Component {
  render() {
    return (
        <ImageBackground
            style={styles.container}
            source={require('./images/bg.png')}
        >
          <Button
              onPress={() => {}}
              title="Just a button"
          />
        </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Platform.OS === 'ios' ? 60 : 80,
  }
});

const App = createStackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      title: 'Home',
      headerStyle: {
        position: 'absolute',
        backgroundColor: 'transparent',
        zIndex: 100,
        top: 0,
        left: 0,
        right: 0,
        elevation: 0,
        shadowOpacity: 0,
        borderBottomWidth: 0,
      }
    },
  }
})

export default App;