基于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,
scanIcon: {
height: 26.7,
width: 26.7,
searchIcon: {
marginLeft: 6,
marginRight: 6,
width: 16.7,
height: 16.7,

});

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

import React,
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

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