反应导航标题

Question

我使用带有本机导航版本^ 4.3.7的本机0.62.0和createMaterialBottomTabNavigator。我尝试搜索并实施他们的解决方案，但似乎都没有用。我想将文本放在标题中。这就是我尝试过的。

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

Answer 1

尝试一下：

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

Answer 2

在删除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 />
        };
      }