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

Posted 2023-02-22

【中文标题】React Native Elements：如何在导航栏中显示标题组件？

【英文标题】：React Native Elements: How do I display header component in navigation bar?

【发布时间】：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 来解决问题。

【参考方案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]);

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