React -Native 状态栏文件居中

前端之家收集整理的这篇文章主要介绍了React -Native 状态栏文件居中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

代码

var StackHomeOptions =({navigation})=>{

    let {state} = navigation;
    console.log('Home navigation:'+navigation+state.params);
    const headerStyle = ETTHeaderStyles.headerStyle;
    const headerTitle = '北京';
    const headerTitleStyle = ETTHeaderStyles.headerTitleStyle;
    const headerBackTitle = '返回';
    const headerRight= (<Button onPress={() => navigation.navigate('MyScene',{
        title:'个人中心'
    })} title={'详情'} />);
    const headerLeft =(<View/>);
    return {headerTitle,headerRight,headerTitleStyle,headerStyle,headerBackTitle,headerLeft}
};

style:

var ETTHeaderStyles = StyleSheet.create(
    {
        headerStyle: {
            backgroundColor: '#1C1D21'
        },headerTitleStyle: {
            flex:1,alignSelf:'center',fontSize: 20,color: '#ffffff',textAlign: 'center',fontSize: 20
        },bigTextPrompt: {
            width: 300,backgroundColor: 'gray',color: 'white',});


问题 1。 因为是首页 所以 右侧有按钮 左侧没有按钮 所以会出现title 向左偏移问题 :

解决办法:在 StackHomeOptions 中 增加 const headerLeft =(<View/>);

问题2. 在 ETTHeaderStyles 中headerTitleStyle 设置了 alignSelf:'center',安卓还是不能够居中

解决办法ETTHeaderStyles 中headerTitleStyle 设置

{
flex:1,

alignSelf:'center',

}

原文链接:https://www.f2er.com/react/301715.html

猜你在找的React相关文章