无法在反应导航堆栈中居中标题 - React-Native？

Question

我无法在 react-navigation V4+ 中将标题居中，它在使用 v3 之前工作正常，当使用 RN-stack 由于某种我不知道的原因我无法将标题居中。

它就出现在右边，

我在 headerTitleStyle 和 headerStyle

中尝试了这些

justifyContent, alignItems and alignSelf but not works :/

如果你对此有任何想法，请告诉我？

"react-navigation": "^4.0.10",
"react-navigation-drawer": "^2.3.3",
"react-navigation-stack": "^2.0.16",
"react-native-screens": "^2.0.0-alpha.29",

这是代码

static navigationOptions = ({navigation}) => {
    const showModal = navigation.getParam('showModal', () => {});
    return {
      title: navigation.getParam('title'),
      headerTitleStyle: {
        fontFamily: 'Cairo-Regular',
        fontSize: Platform.OS == 'ios' ? 16 : 18,
        color: '#fff',
        flex: 1,
        textAlign: 'center',
      },
      headerStyle: {
        backgroundColor: navigation.getParam('color'),
      },
      headerRight: (
        <Grid>
          <Row>
            <Body>
              <Button
                transparent
                icon
                onPress={() => {
                  navigation.openDrawer();
                }}>
                <Icon
                  name="ios-menu"
                  type="Ionicons"
                  style={{fontSize: 25, color: '#fff'}}
                />
              </Button>
            </Body>
            {!navigation.getParam('title').includes('details') && (
              <Body>
                <Button transparent icon onPress={() => showModal()}>
                  <Icon
                    name="more"
                    type="Ionicons"
                    style={{fontSize: 25, color: '#fff'}}
                  />
                </Button>
              </Body>
            )}
          </Row>
        </Grid>
      ),
      headerLeft: (
        <Grid>
          <Row>
            <Body>
              <Button
                transparent
                icon
                onPress={() => {
                  navigation.pop();
                }}>
                <Icon
                  name="arrow-round-back"
                  type="Ionicons"
                  style={{
                    fontSize: Platform.OS == 'ios' ? 30 : 25,
                    color: '#fff',
                  }}
                />
              </Button>
            </Body>
            <Body>
              <Button
                transparent
                icon
                onPress={() => {
                  navigation.navigate('search');
                }}>
                <Icon
                  name="search"
                  type="Ionicons"
                  style={{
                    fontSize: Platform.OS == 'ios' ? 30 : 25,
                    color: '#fff',
                  }}
                />
              </Button>
            </Body>
          </Row>
        </Grid>
      ),
    };
  };

Answer 1

您需要使用headerTitleAlign

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

Answer 2

在 react-native 更新版本后：“0.60.0”我们可以像这样处理 header 标题..在 DefaultNavigationOptions|screenOptions|options 下

const navigator = createStackNavigator({
  IndexScreen : IndexScreen,
},{
  initialRouteName:"IndexScreen",
  defaultNavigationOptions:{// or in screenOptions||options
    title:"Blogs",
    headerTitleAlign:"center"
  }
});

无法在反应导航堆栈中居中标题 - React-Native？

Can't center title in react navigation stack - React-Native?

javascript

react-native

react-navigation

react-navigation-stack