基于React Native构建的仿京东客户端（一） - 实现沉浸式状态栏和搜索栏

创建JdApp项目：

myths-Mac:~ myth$ react-native init JdApp

创建images文件夹，下载图片素材，将banner,header,home_icons，tabs 这4个文件里的文件全部copy到images文件夹里；顺便查看一下默认的index.js文件代码的内容，这个文件的代码自始至终我都不会去修改它：

images文件夹图片下载地址：https://pan.baidu.com/s/1j6m2-lipUr8UZUDvsDHnuQ    下载地址永久公开有效

Header.js 文件完整的代码如下：

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Image,
    TextInput,
    StatusBar
} from 'react-native';
export default class Header extends Component {
    render() {
        return (
            <View style={styles.container}>
               <StatusBar
                 animated={true} //指定状态栏的变化是否应以动画形式呈现。目前支持这几种样式：backgroundColor, barStyle和hidden
                 hidden={false}  //是否隐藏状态栏。
                 backgroundColor={'transparent'} //状态栏的背景色
                 translucent={true} //指定状态栏是否透明。设置为true时，应用会在状态栏之下绘制（即所谓“沉浸式”——被状态栏遮住一部分）。常和带有半透明背景色的状态栏搭配使用。
                 barStyle={'light-content'} // enum('default', 'light-content', 'dark-content')
                >
                </StatusBar>
                <Image source={require('./images/header/header_logo.png')} style={styles.logo}/>
                <View style={styles.searchBox}>
                    <Image source={require('./images/header/icon_search.png')} style={styles.searchIcon}/>
                    <TextInput
                        keyboardType='web-search'
                        placeholder='搜索京东商品/店铺'
                        style={styles.inputText}
                        underlineColorAndroid='transparent' />
                    <Image source={require('./images/header/icon_voice.png')} style={styles.voiceIcon}/>
                </View>
                <Image source={require('./images/header/icon_qr.png')} style={styles.scanIcon}/>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        paddingLeft: 10,
        paddingRight: 10,
        paddingTop: 20,
        height: 68,
        backgroundColor: '#d74047',
        alignItems: 'center'
    },
     logo: {
         height: 24,
         width: 64,
         resizeMode: 'stretch'
     },
     searchBox: {
         height: 30,
         flexDirection: 'row',
         flex: 1,
         borderRadius: 5,
         backgroundColor: 'white',
         alignItems: 'center',
         marginLeft: 8,
         marginRight: 12
     },
    inputText: {
        flex: 1,
        backgroundColor: 'transparent',
        fontSize: 14,
        paddingTop: 0,
        paddingBottom: 0,
    },
   voiceIcon: {
        marginLeft: 5,
        marginRight: 8,
        width: 15,
        height: 20,
        resizeMode: 'stretch'
    },
    scanIcon: {
        height: 26.7,
        width: 26.7,
        resizeMode: 'stretch'
    },
    searchIcon: {
        marginLeft: 6,
        marginRight: 6,
        width: 16.7,
        height: 16.7,
        resizeMode: 'stretch'
    },

});

App.js文件完整的代码如下：

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';
import Header from './Header';
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Header/>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

必须首先启动安卓模拟器，然后才能启动JdApp项目:

myths-Mac:JdApp myth$ react-native run-android

使用Xcode打开JdApp项目：

myths-Mac:~ myth$ cd JdApp

myths-Mac:JdApp myth$ Open ios/JdApp.xcodeproj

安卓和苹果模拟器里最终运行的效果如下：