項(xiàng)目需要寫了一個(gè)動(dòng)態(tài)的標(biāo)題欄。原來是沒有一點(diǎn)想法的拦惋。后來想到了。
方法不難安寺。就是在ScrollView向上滑動(dòng)時(shí)厕妖，會(huì)掉用onScroll方法。在onScrollView方法中根據(jù)滑動(dòng)的偏移量挑庶，而后修改state言秸。從而實(shí)現(xiàn)動(dòng)態(tài)效果。
先看看效果迎捺。
test.gif
核心代碼
onScroll(evt){
let y = evt.nativeEvent.contentOffset.y;
// 隱藏返回按鍵和照相機(jī)
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,
})
}
// 朋友圈圖片動(dòng)態(tài)效果
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 {
// 構(gòu)造
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')}
/>
{/* 返回按鍵和照相機(jī)圖片 */}
<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;
// 隱藏返回按鍵和照相機(jī)
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,
})
}
// 朋友圈圖片動(dòng)態(tài)效果
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,
})
}
}
}
另外本代碼中使用的照片（因?yàn)槭前咨穆收酰钥床坏剑?/p>
back_black_white.png
camera.png
friend.png
如有其它想法，歡迎交流露戒。
另外我沒有找到可以設(shè)置背景色的方式椒功，如果有請告知捶箱。謝謝。
