Question

React-navigation文档仍然很年轻，阅读问题对我来说并不是很有用（每个版本的更改）是否有人使用React Native中的react-navigation在Android中使用工作方法来标题？

Answer 1

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

尽管 headerLayoutPreset 在技术上可行，但它应该显示一条消息，告知 expo用户已弃用该消息。实现如下：

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

对于在2020年进行搜索的任何人，这对我来说都是有效的：

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

Answer 4

使用headerTitleStyle：

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

修改后的2019/03/12：

2018年，在react-navigation v2发布后（2018年4月7日），由于某种原因alignSelf不再有效。这是使用headerLayoutPreset的新工作方式。来自@HasanSH：

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

Answer 5

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

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

Answer 6

执行此操作的最佳方法是实现文档中列出的内容：在StackNavigatorConfig内分配一个可选属性，如下所示：

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

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

通过这样做，您完全不必弄乱样式。它将应用于该堆栈中的所有嵌套屏幕。

检查Source

Answer 7

在headerTitleAlign中插入defaultNavigationOptions并将其设置。这是示例：

const MainStack = createStackNavigator(
    {
        ...

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

Answer 8

在React Navigation v5上，我设法使View居中的唯一方法是像这样使用它：

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

 ...

  <MainStack.Screen
    ...
    options={({navigation, route}) => ({
      headerTitle: () => <ViewButton />,
    ...
    })}

Answer 9

我正在使用带有以下开发依赖项的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"

}，

以上选项均不适合我，然后我尝试使用属性 headerTitleAlign：'centre'即可。

下面是我的组件代码

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

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

Answer 10

对于@react-navigation/native@next，我可以确认{ headerTitleAlign: 'center' }适用于Android。下面的示例：

<Stack.Navigator screenOptions={{ headerTitleAlign: 'center' }}>
    <Stack.Screen name="Promo" component={PromoScreen} />
    <Stack.Screen name="Settings" component={SettingsNavigator} />
</Stack.Navigator>

Answer 11

在2020年，如果有人像我那样遇到问题，下面的代码片段对我有用。

<Stack.Screen options={({ route, navigation }) => ({
          title: "Register",
          headerTitleAlign: "center")
        })}
 />

Answer 12

如果您使用的是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 13

根据ReactNavigation的5.x版本，您可以将选项标头属性 headerTitleAlign 与值 center 一起使用。这是代码示例：

<Stack.Screen name="ScreenRegister" component={ScreenRegister}
   options={{ 
       headerTitle: props => <LogoHeader {...props} />,
       headerTitleAlign: 'center'
    }} 
/>

Answer 14

从2020年5月30日开始，您将无法再将任何参数传递给createStackNavigator()。

要使标题居中，必须使用以下内容（带有headerTitleAlign属性）：

<Stack.Screen
    name="Centered"
    component={Centered}
    options={{
      title: 'Centered title',
      headerShown: true,
      headerTitleAlign:'center'
    }}
/>

Answer 15

在headerTitleAlign: 'center'中添加navigationOptions

示例：

  static navigationOptions = ({navigation}) => ({
    headerTitle: (
      <Image
        style={{width: 100, height: 100}}
        resizeMode="contain"
        source={icons.logo}
      />
    ),
    headerTitleAlign: 'center',
  });

Answer 16

headerTitleStyle：{ 白颜色'， textAlign：'居中'，弹性：1 }

Answer 17

这对我适用于Android和iOS：

static navigationOptions = {
    headerTitleStyle: {
        textAlign: 'center',
        flexGrow: 1,
    },
    headerRight: (<View/>)
};

Answer 18

navigationOptions:({navigation}) =>({
                    gesturesEnabled :false,

                    headerTitleStyle : {
                            color:"white",
                            fontFamily:"OpenSans",
                            alignSelf: 'center' ,
                            textAlign: 'center',
                            flex:1
                    },
                  }),

在这里。 => {flex:1 ,textAlign: 'center' and alignSelf: 'center'}对我有用！

Answer 19

在中心设置反应导航标题标题。使用headerTitleStyle CSS。

static navigationOptions = {
        title: 'Home',
        headerTintColor: '#fff',
        headerTitleStyle: {
            width: '90%',
            textAlign: 'center',
        },
    };

Answer 20

只需额外使用 options 属性，

<Stack.Screen
      component={HomeScreen}
      name="Skin Cancer Prediction"
      options={{
          headerTitleAlign: "center",
      }}
/>

你可以走了?

Answer 21

这对我来说适用于最新版本16.9.0，

<MyTextField 
   placeholder={"Nickname"}
   size={"small"}
   type="text"
   name={"nickname"}
   id={"nickname"}
/>

Answer 22

虽然我遇到了同样的事情，但解决方案很简单。我只是添加了一行代码 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>
  )
}

Answer 23

在反应导航V5中

<AuthStack.Screen
  name="SignupScreen"
  component={SignupScreen}
  options={{ title: "Sign Up", animationEnabled: false, headerTitleAlign: 'center', }}
/>

Answer 24

如果标题有 1 个以上的项目，即 left , right , center 如下：

  <TabOneStack.Screen
        name="HomeScreen"
        component={TabOneScreen}
        options={{
          headerLeftContainerStyle: { marginLeft: 10 },
          headerRightContainerStyle: { marginRight: 10 },
          headerTitleContainerStyle: { backgroundColor: "yellow", alignItems: "center" },
          headerLeft: () => <ProfilePicture image="https://pbs.twimg.com/profile_images/1383042648550739968/fS6W0TvY_200x200.jpg" size={40} />,
          headerTitle: () => (<Ionicons name="logo-amazon" size={30}  />),
          headerRight: () => (<MaterialCommunityIcons name="star-four-points-outline" size={30} />)
        }}
      />

然后将 alignItems:center 添加到 headerTitleContainerStyle 将使标题组件 https://developer.nvidia.com/opencl

Answer 25

使用 React Navigation v5 ，您还可以使用以下选项：

headerTitleAlign:'center'

就像下面的示例一样，我想完美地将标题居中。

<Stack.Screen
    name="Settings"
    component={SettingsScreen}
    options={{
      title: 'SMS Recipient Number',
      headerShown: true,
      headerTitleAlign:'center'
    }}
/>

Answer 26

from ..models.User import User

Answer 27

 headerTitleStyle :{textAlign: 'center', flex: 1}

以上代码对我有用

Answer 28

这绝对适用于android

      headerTitleStyle:{
         flex: 1, textAlign: 'center'
      },

Answer 29

这对我有用：）

static navigationOptions = {
title: "SAMPLE",
headerTitleStyle: { alignSelf: 'center',flex: 1, textAlign: 'center'},
headerRight: (<View />)

};

Answer 30

您应该将headerLayoutPreset：'center'添加到createeStackNavigator函数中。

这是一种真实的方式：

const someStack = createStackNavigator({
ConfigurationScreen: ConfigurationScreen,
PreferencesScreen: PreferencesScreen},
{ headerLayoutPreset: 'center' });

参考： https://github.com/react-navigation/react-navigation/pull/4588

Answer 31

使用headerTitleContainerStyle

static navigationOptions = {
  headerTitleStyle: { justifyContent: 'center' },
}

Answer 32

headerTitleStyle: {
    color: 'white',
    textAlign: 'center',
               flex: 1
}

Answer 33

确保在导致堆栈溢出之前检查问题，通常更有帮助。issue regarding your problem但是正如himanshu在评论中所说，你需要访问title style属性来调整你想要的标题。

n2

正如问题所示，我认为你已经设法找到了解决方案，因为这是不久前的事。但对于遇到此问题的其他人来说，它可能会有所帮助。

Answer 34

您可以使用此文件更改在反应导航的堆栈导航器中为android设置标题标题中心：

node_modules\react-navigation\src\views\Header.js

在Header.js文件中更改此代码： -

title: {
bottom: 0,
left: TITLE_OFFSET,
right: TITLE_OFFSET,
top: 0,
position: 'absolute',
alignItems: Platform.OS === 'ios' ? 'center' : 'center',
},

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

34 个答案:

修改后的2019/03/12：

这对我有用：）