我无法对齐标题标题我的反应本机应用程序的标题

Question

我在打开 vscode 的 Simulator.app 上进行 reactnative iOS 模拟，看看几个小时后 dat 代码有什么问题，我尝试了 10 多个解决方案......但仍然是同样的问题

我尝试将顶部栏中的标题“左”对齐。就这么简单。

我正在开发一个新版本，我刚刚为该项目进行了初始化。

为了快速清晰：headerTitleAlign 在我的应用上不起作用。

目前我的代码是：

<Stack.Navigator screenOptions={{
      headerStyle :{
          backgroundColor : Colors.light.tint,
        },
        headerTintColor: Colors.light.background, 
        headerTitleStyle: {
          fontWeight:'bold',
        }
}}>

在这种情况下，我能找到的大部分解决方案是将我的 headerTitleAlign 设置为标题样式：

 <Stack.Navigator screenOptions={{
**<!-- PUT MY CODE HERE -->** 
      headerStyle :{
          backgroundColor : Colors.light.tint,
        },
        headerTintColor: Colors.light.background, 
        headerTitleStyle: {
          fontWeight:'bold',
        }
}}>

所以我做到了：

 <Stack.Navigator screenOptions={{
      alignHeaderTitle : 'left',
      headerStyle :{
          backgroundColor : Colors.light.tint,
        },
        headerTintColor: Colors.light.background, 
        headerTitleStyle: {
          fontWeight:'bold',
        }
}}>

但是 dat 不起作用。我的意思是，我的头衔是居中。 我听说它是​​在 iOS 上默认设置的，我该如何修改它？

我的部分测试：

<Stack.Navigator screenOptions={{
          defaultNavigationOptions: {
            headerTitleAlign: 'left'},
      headerStyle :{
          backgroundColor : Colors.light.tint,
        },
        headerTintColor: Colors.light.background, 
        headerTitleStyle: {
          fontWeight:'bold',
        }
}}>

<Stack.Navigator screenOptions={{
      headerStyle :{
          backgroundColor : Colors.light.tint,
        },
        headerTitleAlign: 'left',
        headerTintColor: Colors.light.background, 
        headerTitleStyle: {
          fontWeight:'bold',
        }
}}>

<Stack.Navigator screenOptions={{headerTitleAlign: 'left',
      headerStyle :{
          backgroundColor : Colors.light.tint,
        },
        headerTintColor: Colors.light.background, 
        headerTitleStyle: {
          fontWeight:'bold',
        }
}}>

  <Stack.Navigator screenOptions={{ 
    title: "Title left",
    headerTitleAlign:'left',
    headerTitleStyle: { 
        textAlign:"left", 
        flex:1 
    },

      headerStyle :{
          backgroundColor : Colors.light.tint,
        },
        headerTintColor: Colors.light.background, 
        headerTitleStyle: {
          fontWeight:'bold',
        }
}}>

...等等等等

所以我猜它可能在这部分代码之外，可能默认设置为 !important 直到新版本？

我在<Stack.Screen name="Root" 上尝试了同样的事情 但还是同样的问题。

这个问题来自视频的开头：

https://www.youtube.com/watch?v=EvSUJ5lUcBw&t=1705s

非常感谢您的帮助兄弟们

Answer 1

我想我找到了答案， React 导航在文档中说： Screen of documentation

有破解吗？ )) 它完全毁了我的应用程序的用户界面：D