使用createStackNavigator、Reaction Native的页眉的透明背景 [英] Transparent background for header using createStackNavigator, React Native

问题描述

我使用CRNA创建了一个项目，该项目使用了Reaction-Naviation。在其中一个屏幕中，我有一个覆盖整个屏幕的背景图像，并且我希望包括页眉。

如下图：

我是否应该只隐藏标题并使用包含所需元素的视图？如果是，这会不会在深度链接的情况下造成麻烦？

解决方案

反应导航提供了一个名为headerTransparent的很酷的道具，可以在 用于呈现标题下的内容的顺序。

因此，中的代码应该如下所示：

static navigationOptions = {
    headerTransparent: true
  }

推荐答案

要实现此效果，您需要执行以下步骤：

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;

这篇关于使用createStackNavigator、Reaction Native的页眉的透明背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！