3.4.3 适配 Android 机型

虽然当前的代码在 iPhone6 机型上运行结果没问题，但是在其它机型上是有问题的。

图3-7 Android运行结果

Android 运行结果如图3-7 所示，问题还是蛮严重的。选项卡上面多了一块空白的距离，并且还存在本不应该有的阴影。

多的空白距离是由于在 tabBarOptions 中的 style 的定义了 paddingTop: 20。 因为 iOS 和 Android 存在差异， Android 代码可以控制的页面一般是不包含状态栏的，也就是说每个页面最顶端是在状态栏之下，而 iOS 是包含状态栏的，状态栏的高度是 20 个单位。所以在 iOS 程序中为了保证状态栏正常显示，需要在顶部组件增加 20 的 padding，Android 程序并不需要。

Android 选项卡采用质感设计，默认是有阴影的，通过配置样式是可以去掉的。

修改 ‘/src/config/theme.js ’

import {Dimensions, Platform} from 'react-native';
export default module = {
    screenWidth: Dimensions.get('window').width,
    screenHeight: Dimensions.get('window').height,
    btnActiveOpacity: 0.5,
    actionBar: {
        height: 44,//Platform.OS === 'android' ? 56 : 44 //根据不通平台高度不一致
        backgroundColor:'#fff'  //统一定义组件的背景色
    },
    barContentPad: (Platform.OS === 'android' ? 0 : 20), //根据不同平台顶部 padding不一致
    // 常用颜色
    pageBackgroundColor: '#f5f5f5',
    primaryColor: '#22548a',
    lightGray: '#f5f5f5',
    lightBlack: '#999999',
};

在主题样式文件中定义了 actionBar.height ， Android 为 56 单位，iOS为44，顶部组件的高度参考Android/iOS 原生顶部组件的高度。当然也可以根据设计稿尺寸让 Android 和 iOS 都保持44，barContentPad 用于顶部的 padding ，Android 为0。

修改 App.js，应用 theme.js 中定义的样式，Android 程序顶部 padding 为 0 ，代码如下：

const CategoryTab = createMaterialTopTabNavigator({
  //...
}, {
    //...
    tabBarOptions: {
        // tabbar上label的style
        labelStyle: {
        },
        // tabbar的style
        style: {
            height: theme.actionBar.height+theme.barContentPad,//修改高度
            marginHorizontal: theme.screenWidth / 6,
            paddingTop: theme.barContentPad, //不同平台高度不一样
            backgroundColor: '#fff',
            elevation: 0, //组件的高度为0 就没有阴影了
            shadowOpacity: 0 //阴影完全透明
        },
        //...
    },
    //自定义 TabBar
    tabBarComponent: (props) => (
        <CustomTabBar {...props}/>
    )
});

Android 状态栏的背景色也是可以修改成白色的，如果修改 Android 端状态栏背景色，可以通过 StatusBar 组件修改，参考文档：http://facebook.github.io/react-native/docs/statusbar.html 修改 src/pages/CategoryPage.js ，其它页面也一并修改。

type Props = {};
export default class CategoryPage extends Component<Props> {

    render() {
        return ( // 渲染布局
            <View style={styles.container}>
                <StatusBar barStyle={'dark-content'} backgroundColor={'#fff'}/>
                <Text style={{margin:10,fontSize:20,color:'black'}}>分类</Text>
            </View>
        );
    }
}

render 函数中添加了 StatusBar 组件。 barStyle 表示状态栏的文字颜色，dark-content 表示灰色，light-content 表示白色。 backgroundColor 表示状态栏背景色，只在 Android4.4 以上版本中有效。 不同页面状态栏颜色不一致的话，可以通过监听页面获取焦点事件动态设置 StatusBar 颜色，代码如下：

type Props = {};
export default class CategoryPage extends Component<Props> {

    componentDidMount() {
        // 监听页面获取焦点
        this._navListener = this.props.navigation.addListener('didFocus', () => {
            StatusBar.setBarStyle('dark-content');
            Platform.OS==='android' && StatusBar.setBackgroundColor('#fff');
        });
    }
    componentWillUnmount() {
        this._navListener.remove();
    }
    //...
}

Android 代码执行结果如图3-8所示。 图3-8 Android 代码执行结果

查看代码

如果你已经从 GitHub 上克隆了这个程序的 Git 仓库，那么可以执行 git checkout 3d 签出程序的这个版本。