React Native 自定义导航栏随滚动渐变
实现效果预览：
代码实现：
1、定义导航栏 NavPage.js
import React, {Component} from 'react';
import {View, Text, Image, StyleSheet, TouchableOpacity, Platform, Dimensions} from 'react-native';
/**
* 自定义导航栏
*/
let height = (Platform.OS === 'ios' ? : ) +
export default class NavPage extends Component {
static defaultProps = {
title: 'title',
};
render() {
let {title} = this.props;
return (
<View style={styles.container}>
<TouchableOpacity style={styles.item} onPress={() => {
alert('返回')
}}>
<Image style={styles.icon} source={require('./arrow.png')}/>
</TouchableOpacity>
<View style={{alignItems: 'center', flex: }}>
<Text style={{color: '#FFF', fontSize: }}>{title}</Text>
</View>
<TouchableOpacity style={styles.item} onPress={() => {
alert('更多')
}}>
<Image style={[styles.icon, {width: , height: }]} source={require('./more.png')}/>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
width: Dimensions.get('window').width,
height: height,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingTop: Platform.OS === 'ios' ? : ,
paddingHorizontal: ,
position: 'absolute',
},
icon: {
width: ,
height: ,
color: "white",
},
item: {
height: ,
width: ,
justifyContent: 'center',
alignItems: 'center'
}
});
调用实现：
import React, {Component} from 'react'
import {
StyleSheet,
Text,
View,
ListView,
Image,
Dimensions,
TextInput
} from 'react-native'
import NavPage from "./NavPage";
const {width} = Dimensions.get('window')
export default class TestMyNav extends Component<{}> {
constructor(props) {
super(props)
this.navBar = null
this.renderRow = this.renderRow.bind(this)
this.renderHeader = this.renderHeader.bind(this)
this.state = {
dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
}
}
renderRow(rowData, sectionId, rowId) {
return (
<View
style={{height: , justifyContent: 'center', borderWidth: , borderColor: 'red'}}
key={rowId}>
<Text style={{marginHorizontal: }}>{`这时第：${rowId}行`}</Text>
</View>
)
}
renderHeader() {
return (
<View>
<Image style={{height: 200, width: width}}
source={{uri: 'https://upload.jianshu.io/users/upload_avatars/2174847/35584aef-dcac-46c0-9280-67a3b1ebb2c9.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96'}}
resizeMode={'cover'}/>
</View>
)
}
_onScroll(event) {
let y = event.nativeEvent.contentOffset.y
let opacityPercent = y / 200
if (y < 200) {
this.navBar.setNativeProps({
style: {opacity: opacityPercent}
})
} else {
this.navBar.setNativeProps({
style: {opacity: 1}
})
}
}
render() {
let dataSource = this.state.dataSource.cloneWithRows([, , , , , , , , , ])
return (
<View style={styles.container}>
<ListView
onScroll={this._onScroll.bind(this)}
bounces={false}
dataSource={dataSource}
renderRow={this.renderRow}
renderHeader={this.renderHeader}/>
<View
ref={ref => this.navBar = ref}
style={[styles.navBar, {opacity: 0}]}>
<NavPage title={'详情页'}/>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: ,
backgroundColor: '#F5FCFF',
},
navBar: {
height: ,
width: width,
position: 'absolute',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FA0016',
},
navContent: {
marginTop: ,
height: ,
width: width,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal:
},
searchBar: {
justifyContent: 'center',
paddingHorizontal: ,
borderTopLeftRadius: ,
borderBottomLeftRadius: ,
borderTopRightRadius: ,
borderBottomRightRadius: ,
flex: ,
height: ,
backgroundColor: 'white',
marginHorizontal:
}
})
红色部分为核心代码
参考：
https://github.com/guangqiang-liu/react-native-gradientNavigationBarDemo
本博客地址： wukong1688
本文原文地址：https://www.cnblogs.com/wukong1688/p/11020748.html
转载请著名出处！谢谢~~