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',
            textAlign: 'center',
            fontSize: 20
        },
    });


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

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

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

        解决办法ETTHeaderStyles 中headerTitleStyle 设置

        {   
              flex:1,

            alignSelf:'center',

        }

发布了255 篇原创文章 · 获赞 39 · 访问量 35万+

猜你喜欢

转载自blog.csdn.net/kangguang/article/details/79821021