React-Native如何解决安卓标题不居中的问题

  • Z时代
  • 2024-01-10
  • 分类：综合

react

一、问题

在使用React-Navigation的时候，发现页面的标题栏在iOS中自动居中，而在安卓中自动居左，如下图：

而安卓的则是：

关键代码如下：

二、解决

代码如下

解释：
1、Button改为TouchableOpacity

将原先的Button改为TouchableOpacity，因为在这里对Button设置背景颜色backgroundColor的时候，发现不起作用，而设置color属性却改变了Button的背景颜色而不改变字体颜色，并还有边框颜色，且也无法修改。
2、为什么要加一个空的headerLeft？

如果不加headerLeft，标题依然无法完全居中，如下：

3、设置headerTitleStyle : {flex:1, textAlign:‘center’}

作用：标题居中显示

最后完整代码：

const TakeOutFoodStack = createStackNavigator({
    TakeOutFood : {
        screen : TakeOutFoodScreen,
        navigationOptions : {
            headerTitle : 'TakeOutFood',
            headerLeft: <View/>,//苹果默认居中显示，而安卓标题默认居左显示，此代码是为了在安卓上实现居中效果
            headerTitleStyle : {flex:1, textAlign:'center'}, //苹果默认居中显示，而安卓标题默认居左显示，此代码是为了在安卓上实现居中效果
            headerRight: (//使用TouchableOpacity而不使用Button是因为无法对Button在这里设置背景颜色会有问题
                <TouchableOpacity onPress={()=>alert('1000')}>
                    <Text style={{color:'#fff', paddingRight: 20,}}>更多</Text>
                </TouchableOpacity>
            ),
        }
    },
},

以上是 React-Native如何解决安卓标题不居中的问题 的全部内容， 来源链接： utcz.com/z/383780.html

回到顶部