时间戳

首页 > 解决方案 > 在反应本机导航中自定义标题

react-native - 在反应本机导航中自定义标题

问题描述

在我的应用程序主屏幕中，我想自定义标题以使左右两个图标可以使用：

<HomeStack.Screen
      name="Home"
      component={HomeScreen}
      options={{
        title: '',    
        headerLeft: () => (
          <View style={{ marginLeft: 10 }}>
            <Icon.Button
              name="ios-menu"
              size={25}
              color="#000000"
              backgroundColor={COLORS.primary}
              onPress={() => navigation.openDrawer()}
            />
          </View>
        ),
        
        headerRight: () => (
          <View style={{ marginLeft: 10 }}>
            <Icon.Button
              name="location-outline"
              size={25}
              color="#000000"
              backgroundColor={COLORS.primary}
              onPress={() => navigation.openMap()}
            />
          </View>
        ),
 }} />
  </HomeStack.Navigator>

我想添加其他内容，但要位于中心，这将根据我的需要进行定制，但我不知道如何实现它，因为没有任何东西叫做 headerCneter：

标签： react-nativereact-native-navigation

解决方案

也许您可以利用堆栈导航器中的标题选项？然后，您可以使用路由参数从那里自定义您的标头。

推荐阅读