react-navigation 上的透明背景应用不正确

Question

我目前正在尝试在我的应用程序上制作线性渐变背景，它按预期工作，但在右侧 header 有一些我无法访问的容器。有任何想法吗？我尝试更改 headerRightContainerStyle，但这只会影响右侧的按钮，不会影响那个空的 space。奇怪的是只有右侧也受到影响，因为 header 的左侧是我想要的效果

图片：https://ibb.co/cYKj1XV

代码：

...
  const navigation = useNavigation();

  useLayoutEffect(() => {
    navigation.setOptions({
      title: "Users Page",
      headerStyle: {
        backgroundColor: "transparent",
      },
      headerRightContainerStyle: {
        backgroundColor: "red",
      },
      headerRight: () => <Button title="Next" color={colors.blue} />,
    });
  }, []);

  return (
    <LinearGradient
      colors={gradientColorsBackground}
      style={styles.gradientBackground}
    >
      <SafeAreaView style={styles.container}>
        <KeyboardAvoidingView
          style={styles.keyboardAvoidingContainer}
          behavior="padding"
        >
          <KeyboardAwareFlatList
            style={styles.usersList}
            data={users}
            keyExtractor={(item) => `${item.id}`}
            renderItem={({ item }) => <Person name={item.name} id={item.id} />}
          />
          <TextInput
            style={styles.input}
            autoFocus={false}
            blurOnSubmit={false}
            placeholder="Type people's names"
            onSubmitEditing={({ nativeEvent: { text } }) => addUser(text)}
            autoCorrect={false}
          />
        </KeyboardAvoidingView>
      </SafeAreaView>
    </LinearGradient>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: "100%",
  },
  gradientBackground: {
    flex: 1,
    width: "100%",
    height: "100%",
    alignItems: "center",
  },
  input: {
    height: 50,
    backgroundColor: "orange",
    width: "100%",
    borderStyle: "solid",
    borderWidth: 3,
  },
  keyboardAvoidingContainer: {
    flex: 1,
  },
  usersList: {
    flex: 1,
    width: "100%",
    backgroundColor: colors.blue,
  },
});
...

Answer 1

使用此代码使 header 颜色透明

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

在这里查看小吃https://snack.expo.io/lMGBTKXJK

Answer 2

看来您只需要设置 headerTransparent: true。

  useLayoutEffect(() => {
    navigation.setOptions({
      title: "Users Page",
      headerTransparent: true,
      headerRight: () => <Button title="Next" color={colors.blue} />,
    });
  }, []);

文档：https://reactnavigation.org/docs/4.x/stack-navigator/#headertransparent

此处示例：https://snack.expo.io/M230FOH!Q

react-navigation 上的透明背景应用不正确

Transparent background on react-navigation not applying correctly

javascript

styling

react-native

react-navigation