React Native Elements：如何在导航栏中显示 header 组件？

Question

我试图在导航 header 中显示 header 组件，但它显示在导航之外。蓝色的条应该替换顶部的白色矩形 space。

 render() {
    return (
      <View>
        <View
          style={{
            paddingTop: Constants.statusBarHeight
          }}
        >
          <Header leftComponent={{ text: "Delete Account" }} />
        </View>
        <ScrollView
          style={{ marginTop: 20 }}
          keyboardShouldPersistTaps="always"
        >
          <View
            style={{
              flex: 1,
              alignItems: "center",
              justifyContent: "center"
            }}
          >
          ...
          </View>
        </ScrollView>
      </View>
    );
  }

Answer 1

您正在向包含 header 的视图添加 marginTop，这会将 header 边距向下移动 50，从视图中删除 marginTop

<View>
  <Header leftComponent={{ text: 'Delete Account' }} />
</View>

您还需要使用 centerComponent 和 placement 属性将标题向左移动，并在您的 stackNavigator

中隐藏 header

class AccountScreen extends React.Component {
  render() {
    return (
      <View style={{ marginTop: Constants.statusBarHeight }}>
        <Header placement="left" centerComponent={{ text: 'Delete Account' }} />
        <Text>Account Screen</Text>
      </View>
    );
  }
}

const RootStack = createStackNavigator(
  {
    Account: {
      screen: AccountScreen,
      navigationOptions: {
        header: null,
      },
    },
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Account',
  }
);

DEMO

Answer 2

如果您想创建自己的 header 栏（React 本机元素），您必须从应用程序设置中完全隐藏 React 导航堆栈中的 header 或在特定屏幕上隐藏它 Hide header in stack navigator React navigation

Answer 3

在 React Navigation v6 中执行此操作的正确方法，除了禁用 React Navigation 中的默认 header（如 doubles 所述）之外，还有导航 header 属性 return Header 组件，都在 useLayoutEffect 下。像这样：

  useLayoutEffect(() => {
    navigation.setOptions({
      header: () => (
        <Header
          leftComponent={...}
          centerComponent={...}
          rightComponent={...}
        />
      ),
    });
  }, [navigation]);

这将为该屏幕组件创建自定义 header，当然，您也可以在 parent/stack 级别设置 header 属性。

React Native Elements：如何在导航栏中显示 header 组件？

React Native Elements: How do I display header component in navigation bar?

react-native

react-native-elements