解决方案

Question

我使用使用React-Navigation的CRNA创建了一个项目。在其中一个屏幕中，我有一张覆盖整个屏幕的背景图片，并且要包含标题。

喜欢这张图片：

我应该只隐藏标题并使用包含所需元素的View吗？如果是，在进行深层链接时是否会造成任何麻烦？

解决方案

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

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

更改导航标题的样式，使其具有绝对位置，透明背景且无边框。
将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;

Answer 4

解决方案：

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

Answer 5

我实现了如下设置导航选项的实现：

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

Answer 6

使用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 7

这对我有用：

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

将海拔设置为 0，这样就没有阴影了。

Answer 8

我是这样做的，但它有一个缺陷，背景颜色必须是硬编码的。这种方法专门用于 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"
    >

使用createStackNavigator，React Native的标头的透明背景

解决方案

8 个答案: