反应导航 Header

Question

我使用 react-native 0.62.0 和 react-navigation 版本 ^4.3.7 和 createMaterialBottomTabNavigator。我尝试搜索并实施他们的解决方案，但 none 似乎有效。我想在 header 中将文本居中。这是我试过的。

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

Answer 1

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

Answer 2

试试这个：

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

反应导航 Header

React navigation Header

reactjs

react-native

react-native-android