项目需要写了一个动态的标题栏。原来是没有一点想法的。后来想到了。
方法不难。就是在ScrollView向上滑动时，会掉用onScroll方法。在onScrollView方法中根据滑动的偏移量，而后修改state。从而实现动态效果。
先看看效果。
test.gif
核心代码
onScroll(evt){
let y = evt.nativeEvent.contentOffset.y;
// 隐藏返回按键和照相机
if(y >= width06 && y<=width08){
opcityNumber = 1-(y-width06)/(width02);
this.setState({
opcityNumber:opcityNumber,
})
}
// 原本以为是文字的，不过看着微信的效果太平滑了。所以我就弄成照片了。
// 开始显示朋友圈图片。
if(y>=width08&&y<=width09 && this.state.friendShow == false){
this.setState({
friendShow:true,
})
}
// 朋友圈图片动态效果
if(y>=width08&&y<=width09){
let friendHeight = (1-(y-width08)/(width01))*10+40;
let friendShowOpactiy = (y-width08)/(width01);
this.setState({
friendHeight:friendHeight,
friendShowOpactiy:friendShowOpactiy,
})
}
//隐藏朋友圈照片
if(y<=width08 && this.state.friendShow == true){
this.setState({
friendShow:false,
})
}
}
全部代码
import React, {
Component,
} from 'react';
import {
StyleSheet,
View,
ScrollView,
StatusBar,
Image,
Dimensions,
} from 'react-native';
let {width,height} = Dimensions.get('window');
const width01 = width*0.1;
const width02 = width*0.2;
const width06 = width*0.6;
const width08 = width*0.8;
const width09 = width*0.9;
export default class TestView1 extends Component {
// 构造
constructor(props) {
super(props);
this.flag = true;
this.state={
opcityNumber:1,
friendShow:false,
friendShowOpactiy:1,
friendHeight:50,
}
}
static navigationOptions = {
header:null,
};
render() {
return (
<View >
<StatusBar
translucent = {true}
backgroundColor = {'#00000000'}
barStyle = {this.state.friendShow?('dark-content'):('light-content')}
/>
{/* 返回按键和照相机图片 */}
<View
style={{
flexDirection:'row',
justifyContent:'space-between',
position:'absolute',
width:width,
height:50,
top:20,
zIndex:2,
alignItems:'center',
paddingLeft:20,
paddingRight:20,
opacity:this.state.opcityNumber,
}}
>
<Image style={{width:32,height:32}} source={require('../../resources/image/back_black_white.png')}>
</Image>
<Image style={{width:32,height:32}} source={require('../../resources/image/camera.png')}>
</Image>
</View>
{/* 朋友圈照片。 */}
{this.state.friendShow?(
<View
style={{
position:'absolute',
height:20+this.state.friendHeight,
paddingTop:20,
width:width,
backgroundColor:'rgba(2555,255,255,'+this.state.friendShowOpactiy+')',
zIndex:3,
}}>
<View style={{
height:this.state.friendHeight,
justifyContent:'center',
left:this.state.friendHeight*0.5,
}}>
<Image
style = {{width:100*(this.state.friendHeight/50),height:this.state.friendHeight*0.8}}
source = {require('../../resources/image/friend.png')}
>
</Image>
</View>
</View>
):(<View></View>)}
<ScrollView
showsVerticalScrollIndicator = {false}
onScroll = {(evt)=>this.onScroll(evt)}
scrollEventThrottle = {16}
>
<Image source={require('../../resources/image/cooker/bg.png')}
style={{width:width,height:width}}>
</Image>
<View style={{height:height}}>
</View>
</ScrollView>
</View>
);
}
onScroll(evt){
let y = evt.nativeEvent.contentOffset.y;
// 隐藏返回按键和照相机
if(y >= width06 && y<=
width08){
opcityNumber = 1-(y-width06)/(width02);
this.setState({
opcityNumber:opcityNumber,
})
}
// 原本以为是文字的，不过看着微信的效果太平滑了。所以我就弄成照片了。
// 开始显示朋友圈图片。
if(y>=width08&&y<=width09 && this.state.friendShow == false){
this.setState({
friendShow:true,
})
}
// 朋友圈图片动态效果
if(y>=width08&&y<=width09){
let friendHeight = (1-(y-width08)/(width01))*10+40;
let friendShowOpactiy = (y-width08)/(width01);
this.setState({
friendHeight:friendHeight,
friendShowOpactiy:friendShowOpactiy,
})
}
//隐藏朋友圈照片
if(y<=width08 && this.state.friendShow == true){
this.setState({
friendShow:false,
})
}
}
}
另外本代码中使用的照片（因为是白色的，所以看不到）
back_black_white.png
camera.png
friend.png
如有其它想法，欢迎交流。
另外我没有找到可以设置背景色的方式，如果有请告知。谢谢。
