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

Question

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

喜欢这张图片：

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

解决方案

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

所以代码应该是这样的：

static navigationOptions = {
    headerTransparent: true
  }

Answer 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>
  );
};

Answer 2

这对我有用：

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

Answer 3

要达到此效果，您需要执行以下步骤：

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;

Answer 4

如果使用 React Navigation 6.x，选项是相同的

headerTransparent

:

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

Answer 5

解决方案：

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

Answer 6

您需要使用 headerTransparent 和 headerShadowVisible，否则如果您只使用 headerTransparent 将会留下阴影。这适用于 React Navigation 6.x。请参阅此处的文档https://reactnavigation.org/docs/native-stack-navigator/#headershadowvisible

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

Answer 7

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

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

Answer 8

与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>

Answer 9

这对我有用：

headerStyle：{海拔：0，backgroundColor：“透明”}

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

Answer 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"
    >

Answer 11

截至 2023 年 8 月和 React-navigation v6+，我必须同时使用

headerStyle

和

headerTransparent

:

<Stack.Screen
    name="Home"
    component={Home}
    options={({ navigation }) => ({
        headerStyle: {
            backgroundColor: 'transparent',
        },
        headerTransparent: true,
    })}
/>