Не удается отцентрировать заголовок в стеке реагирующей навигации - React-Native? - PullRequest
Новая
       13

Не удается отцентрировать заголовок в стеке реагирующей навигации - React-Native?

0 голосов
/ 25 января 2020

Я не могу центрировать заголовок в Reaction-Navigation V4 +, он отлично работает раньше с v3, когда я использую RN-стек, я не могу центрировать заголовок по какой-то причине, я не знаю.

it просто появляется справа,

Я пробую их в 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>
      ),
    };
  };

1 Ответ

0 голосов
/ 25 января 2020

Вам нужно использовать headerTitleAlign

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

...