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

Question

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

喜欢这张图片：

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

解

React Navigation提供了一个叫做headerTransparent的很酷的道具，可以用来在header下渲染东西。

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

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 添​​加 padding top 以修复重叠。

因此，您的代码应该类似于以下内容：

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,
                  }}
              />