Reactnative 使用 createStackNavigator、React Native 的标题透明背景

发布于09月24日

我使用CRNA创建了一个使用React导航的项目.在其中一个屏幕中，我有一个覆盖整个屏幕的背景图像，我想包括标题.

如下图所示:

我应该隐藏标题并使用包含所需元素的视图吗？如果是，在深度链接的情况下，这会导致任何问题吗？

Solution

React导航提供了一种叫做headerTransparent的酷炫props ，可用于

因此，代码应该如下所示:

static navigationOptions = {
    headerTransparent: true
  }

推荐答案

要实现这一效果，您需要遵循以下步骤:

使用绝对位置、透明背景和无边框更改导航标题的样式.
使用ImageBackground组件作为屏幕的父组件，并使用要用作背景的图像.
将填充顶部添加到此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;