Реагировать заголовок навигации - PullRequest
Новая
       6

Реагировать заголовок навигации

2 голосов
/ 08 апреля 2020

Я использую реагирующий на род 0.62.0 с реактивной навигационной версией ^ 4.3.7 и createMaterialBottomTabNavigator. Я пытался найти и внедрить их решения, но ничего из этого не помогло. Я хочу центрировать текст в моем заголовке. Это то, что я пытался. 

static navigationOptions = ({ navigation }) => ({
    title: 'Profile',
    headerTitleStyle: { flex: 1, textAlign: 'center', color: 'white', fontSize: 20, alignSelf: 'center' , },
    headerTintColor: 'white',
    headerStyle: {
        backgroundColor: '#4169E1',
    },
})

Ответы [ 2 ]

1 голос
/ 08 апреля 2020

Попробуйте с этим: 

static navigationOptions = ({ navigation }) => ({
    title: 'Profile',
    headerTitleStyle: { flex: 1, textAlign: 'center', color: 'white', fontSize: 20, alignSelf: 'center' , },
    headerTintColor: 'white',
    headerStyle: {
        backgroundColor: '#4169E1',
    },
    headerTitleAlign: 'center',
})
0 голосов
/ 08 апреля 2020

Попробуйте после удаления alignSelf: 'center' ,. Приведенный ниже код работает для меня. 

  defaultNavigationOptions: ({ navigation }) => {
        return {
          headerStyle: {
            backgroundColor: '#1e89f4'
          },
          headerTitle: 'Statistics',
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
            textAlign: 'center',
            flex: 1
          },
          headerLeft: (
            <View style={{ paddingLeft: 13 }}>
              <FontAwesomeIcon
                size={25}
                color='#fff'
                icon={faBars}
                onPress={() => navigation.openDrawer()}
              />
            </View>
          ),
          headerRight: <View />
        };
      }
...