我们如何将反应导航标题的标题集中在一起？

Question

反应导航文档仍然很年轻,阅读问题对我来说并不是很有用(每个版本的更改)是否有人使用react-navigationReact Native 在Android中使用工作方法来标题？

Answer 1

从 2021 年开始，您可以使用headerTitleAlign。

尽管headerLayoutPreset 在技术上有效，但它应该显示一条消息，通知它已被expo users弃用。实现如下：

const AppNavigator = createStackNavigator({
    Home: HomeScreen,
 }, 
 {
  defaultNavigationOptions: {
      title: 'Centered',
      headerTitleAlign: 'center'
  }
})

React-Navigation v5.x 更新： 根据@Ewan 的整改，如果您使用的是 React-Navigation v5.x，则无法将参数传递给 createStackNavigator()。因此，您应该按如下方式实现它：

<Stack.Navigator screenOptions={{headerTitleAlign: 'center'}}>

Answer 2

要使标题标题居中,我们需要通过添加flex属性来设置flex标头.

navigationOptions: {
    title: "Title center",
    headerTitleStyle: { 
        textAlign:"center", 
        flex:1 
    },
}

Answer 3

使用headerTitleStyle:

static navigationOptions = {
    headerTitleStyle: { alignSelf: 'center' },
    title: 'Center Title',
}

Answer 4

对于在 2020 年搜索的任何人，这对我有用：

<Stack.Navigator screenOptions={{headerTitleAlign: 'center'}}>

https://reactnavigation.org/docs/stack-navigator/#headertitlealign

Answer 5

如果左侧没有后退按钮,则接受的答案仅适用于我.在这种情况下,您需要在右侧设置一个空视图以正确居中.

static navigationOptions = {
    headerTitleStyle: { alignSelf: 'center' },
    title: 'Center Title',
    headerRight: (<View />)
}

Answer 6

最好的方法是实现文档中列出的内容:在StackNavigatorConfigassign中包含一个可选属性,如下所示:

createStackNavigator({
   { ... // your screens},
   { ...,
     headerLayoutPreset: 'center' // default is 'left'
   })

headerLayoutPreset - 指定如何布置标题组件.

通过这样做,您根本不必弄乱样式.它将应用于该堆栈中的所有嵌套屏幕.

检查来源

Answer 7

中插入并设置headerTitleAlign值defaultNavigationOptions。以下是示例：

const MainStack = createStackNavigator(
    {
        ...

        defaultNavigationOptions: {
            headerTitleAlign: 'center',
        }
    }
)

Answer 8

对于 React Navigation V6，以下内容对我来说工作正常：

<Stack.Navigator screenOptions={{ headerTitleAlign: "center" }}>
// Put all of your screens here <Stack.Screen ... />
</Stack.Navigator>

Answer 9

这对我有用:)

static navigationOptions = {
title: "SAMPLE",
headerTitleStyle: { flex: 1, textAlign: 'center'},

};

Answer 10

如果你正在使用react-navigation v4

const stack = createStackNavigator({
  screen1: {screen: Screen},
},{
  defaultNavigationOptions: {
    headerTitleAlign: 'left | center',
  }
});

文件：

https://reactnavigation.org/docs/en/stack-navigator.html#headertitlealign

或者如果你正在使用react-navigation v3

const stack = createStackNavigator({
  screen1: {screen: Screen},
},{
  headerLayoutPreset: 'left | center',
});

文件：

https://reactnavigation.org/docs/en/3.x/stack-navigator.html

Answer 11

我正在使用具有以下开发依赖项的 React 导航，使用alignSelf 和 textAlign 我收到警告

  "dependencies": {
"@react-native-community/masked-view": "^0.1.6",
"@react-navigation/native": "^5.0.0",
"@react-navigation/stack": "^5.0.0",
"base64-js": "^1.3.1",
"lodash": "^4.17.15",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-base64": "0.0.2",
"react-native-ble-plx": "^1.1.1",
"react-native-gesture-handler": "^1.5.6",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "^0.7.2",
"react-native-screens": "^2.0.0-beta.2"

},

上述选项都不适合我，然后我尝试了 property headerTitleAlign: 'center'并且它起作用了。

下面是我的组件代码

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
            <Stack.Screen
              name="Home"
              component={HomeScreen}
              options={{
                title: 'Track Down',
                headerTitleAlign: 'center',
              }}
            />

          </Stack.Navigator>
        </NavigationContainer>
      );
    };

Answer 12

虽然我面临着同样的事情，但解决方案非常简单。我只是添加了一行代码headerTitleAlign: 'center',

function HomeNavigator() {
  return (
    <TabOneStack.Navigator>
      <TabOneStack.Screen
        name="HomeScreen"
        component={TabOneScreen}
        options={{
          headerRightContainerStyle: {
            marginRight: 20,
          },
          headerTitleAlign: 'center',     <-------- here
          headerTitle: () => (
            <Ionicons
              name={'logo-twitter'}
              color={Colors.light.tint}
              size={30}
            />
          ),
        }}
      />
    </TabOneStack.Navigator>
  )
}