css - 我无法对齐我的 reactnative 应用程序的标题

问题描述

我在打开vscode的simulator.app上进行反应性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',
        }
}}>

但它不起作用。我的意思是，我的头衔是居中。我听说它是在 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

非常感谢您的帮助兄弟们

标签： cssreactjsalignmentnativeitems

css - 我无法对齐我的 reactnative 应用程序的标题

问题描述

解决方案

推荐阅读