React Native Elements：如何在导航栏中显示标题组件？答案

【问题标题】：React Native Elements: How do I display header component in navigation bar?React Native Elements：如何在导航栏中显示标题组件？
【发布时间】：2020-03-12 07:42:41
【问题描述】：

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

 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>
    );
  }

【问题讨论】：

使用centerComponent 而不是leftComponent
@Thinker 它会删除中间的空格，但不会显示出来。
你用的是什么导航器？
@Auticcat 我正在使用反应导航堆栈，但我最终通过将标题设置为 null 来解决问题。

标签： react-native react-native-elements

【解决方案1】：

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

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

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

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

【讨论】：

我从滚动视图中删除了 marginTop 并添加了您拥有的确切代码，该代码删除了导航栏和标题组件之间的空白，但它不在顶部。 pasteboard.co/IGVV3Jz.png
有两个标题，一个来自 rn-elements，另一个来自 rn-navigation
我正在使用 App.js 上的 react 导航堆栈来处理导航，但该屏幕上没有任何 navigationOptions。
我记得你可以把它直接放在你的导航选项中。而不是 header: null 只需将您的组件放入其中： header:

【解决方案2】：

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

【讨论】：

我最终将标题设置为 null 以隐藏它。

【解决方案3】：

在 React Navigation v6 中执行此操作的正确方法是，除了禁用 React Navigation 的默认标头（如 doubles 提到的那样）之外，让导航 header 属性返回标头组件，全部在 useLayoutEffect 下.像这样：

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

这将为该屏幕组件创建一个自定义标题，当然，您也可以在父/堆栈级别设置标题属性。

【讨论】：