反应式导航上的透明背景不能正确应用。

Question

我目前正在尝试在我的应用程序上制作一个线性渐变背景，它可以按照预期的方式工作，但在右边的头部有一些容器，我无法访问。有什么办法吗？我试着改变了headerRightContainerStyle，但这只影响到右边的按钮，而不是那个空的空间。很奇怪，为什么只有右边也受影响，因为头的左边是我想要的效果。

图片。https:/ibb.cocYKj1XV

代码。

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

看起来你只需要设置 headerTransparent: true.

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

文档。https:/reactnavigation.orgdocs4.xstack-navigator#headertransparent。

例子在这里。https:/snack.expo.ioM230FOH！Q。

Answer 2

使用这段代码使头部颜色透明

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

点餐 https:/snack.expo.iolMGBTKXJK。