【问题标题】：Transparent background for header using createStackNavigator, React Native使用 createStackNavigator、React Native 的标题透明背景
【发布时间】：2018-09-23 19:34:20
【问题描述】：

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

喜欢这张图片：

我应该隐藏标题并使用包含我想要的元素的视图吗？如果是的话，这会在深度链接的情况下造成任何麻烦吗？

解决方案

React Navigation 提供了一个很酷的名为 headerTransparent 的道具，可以用于为了在标题下渲染一些东西。

所以代码应该是这样的：

static navigationOptions = {
    headerTransparent: true
  }

【问题讨论】：

当我设置 headerTransparent=true 时，标题中的后退按钮不起作用..您对此有任何解决方案。
你能分享你的代码吗？记住是 headerTransparent : true 不是 headerTransparent = true！
谢谢，您的解决方案对我有帮助。

标签： react-native react-navigation

【解决方案1】：

现在使用 React Navigation 5，我们可以做这样的事情：

{
    headerShown: true,
    headerTransparent: true,
}

例如：

const Screen = ({ navigation }) => {
  navigation.setOptions({
    headerShown: true,
    headerTransparent: true,
  });

  return (
    <View>
      <Text>Render your component</Text>
    </View>
  );
};

【讨论】：

您好，如何让透明标题在滚动底部时过渡到不透明？
你把那个常量放在哪里了？？这看起来很不对劲！

【解决方案2】：

这对我有用：

navigationOptions: {
  ...
  headerTransparent: true,
  headerStyle: {
      backgroundColor: 'transparent',
      ...
  }
}

【讨论】：

【解决方案3】：

要达到此效果，您需要遵循以下步骤：

改变导航头的样式，绝对位置，透明背景，无边框。
将 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;

【讨论】：

感谢您的回答，它以某种方式帮助我找到了解决方案。
您需要在与“headerStyle”相同的级别添加“headerTransparent: true”。
@Naoufal 请更新答案以在navigationOptions 中包含headerTransparent: true

【解决方案4】：

解决方案：

navigationOptions: {
    headerTransparent: {
      position: 'absolute',
      backgroundColor: 'transparent',
      zIndex: 100,
      top: 0,
      left: 0,
      right: 0
    }

【讨论】：

这是用于 react navigation v5
在 android 上对我不起作用..（仅适用于 ios）

【解决方案5】：

如果使用React Navigation 6.x，选项相同headerTransparent:

             <Stack.Screen
                  name="BottomTab"
                  component={BottomTabNavigator}
                  options={{
                    headerTransparent: true,
                  }}
              />

【讨论】：

【解决方案6】：

我已经实现了这样设置导航选项：

BirdDetails.navigationOptions = () => {
  return {
    ...NavStyle,
    headerStyle: {
      backgroundColor: 'transparent',
    },
    headerTransparent: {
      position: 'absolute',
    },
    headerLeft: <Back></Back>,
    headerRight: <HeaderDetailsRight></HeaderDetailsRight>,
  };
};

【讨论】：

【解决方案7】：

使用 V5

<NavigationContainer>
        <Stack.Navigator
            initialRouteName="Home"
            screenOptions={{
                headerShown: true,
                headerTransparent:true
            }}
        >
            <Stack.Screen name="Home" component={HomeScreen}/>
            <Stack.Screen name="Detail" component={DetailScreen}/>
            <Stack.Screen name="Setting" component={SettingScreen}/>
        </Stack.Navigator>
    </NavigationContainer>

【讨论】：

【解决方案8】：

你需要使用 headerTransparent 和 headerShadowVisible 否则如果你只使用 headerTransparent 会留下阴影。这适用于 React Navigation 6.x。在此处查看 de docs https://reactnavigation.org/docs/native-stack-navigator/#headershadowvisible

<Stack.Screen name='Main' component={Main} 
    options={{ 
        title: 'MainPage',
        headerTransparent: true,
        headerShadowVisible: false
    }} 
/>

【讨论】：

【解决方案9】：

这对我有用：

headerStyle: {elevation:0, backgroundColor:"transparent"}

将高度设置为 0，这样就没有阴影了。

【讨论】：

【解决方案10】：

我是这样做的，但它有一个缺陷，背景颜色必须是硬编码的。这种方法专门针对ScrollView，从透明变为不透明（保留原始文本）。

由于这是为原生堆栈导航器设计的，以利用 iOS 的大文本，因此 headerHeight 也需要调整为适当的值。

  const navigation = useNavigation();
  return (
    <ScrollView
      onLayout={(e) => {
        navigation.setOptions({
          headerStyle: {
            backgroundColor: "transparent",
          },
        });
      }}
      onScroll={(e) => {
        const headerOpacity =
          Math.min(
            Math.max(e.nativeEvent.contentOffset.y, 0) / headerHeight,
            1.0
          ) ?? 0.0;
          navigation.setOptions({
            headerStyle: {
              elevation: headerOpacity,
              backgroundColor: `rgba(255,0,0,${headerOpacity})`,
            },
          });
      }}
      scrollEventThrottle={16}
      contentInsetAdjustmentBehavior="never"
    >

【讨论】：