[RN] React Native 自定义导航栏随滚动渐变

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' ? 20 : 0) + 90export 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: 1}}><Text style={{color: '#FFF', fontSize: 17}}>{title}</Text></View><TouchableOpacity style={styles.item} onPress={() => {alert('更多')}}><Image style={[styles.icon, {width: 25, height: 5}]} 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' ? 20 : 0,paddingHorizontal: 10,position: 'absolute',},icon: {width: 21,height: 21,color: "white",},item: {height: 30,width: 30,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 = nullthis.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 (<Viewstyle={{height: 100, justifyContent: 'center', borderWidth: 1, borderColor: 'red'}}key={rowId}><Text style={{marginHorizontal: 10}}>{`这时第：${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.ylet opacityPercent = y / 200if (y < 200) {this.navBar.setNativeProps({style: {opacity: opacityPercent}})} else {this.navBar.setNativeProps({style: {opacity: 1}})}}render() {let dataSource = this.state.dataSource.cloneWithRows([0, 1, 2, 3, 4, 5, 6, 7, 8, 9])return (<View style={styles.container}><ListViewonScroll={this._onScroll.bind(this)}bounces={false}dataSource={dataSource}renderRow={this.renderRow}renderHeader={this.renderHeader}/><Viewref={ref => this.navBar = ref}style={[styles.navBar, {opacity: 0}]}><NavPage title={'详情页'}/></View></View>)}}const styles = StyleSheet.create({container: {flex: 1,backgroundColor: '#F5FCFF',},navBar: {height: 64,width: width,position: 'absolute',justifyContent: 'center',alignItems: 'center',backgroundColor: '#FA0016',},navContent: {marginTop: 20,height: 44,width: width,flexDirection: 'row',alignItems: 'center',justifyContent: 'space-between',paddingHorizontal: 15},searchBar: {justifyContent: 'center',paddingHorizontal: 10,borderTopLeftRadius: 12,borderBottomLeftRadius: 12,borderTopRightRadius: 12,borderBottomRightRadius: 12,flex: 1,height: 25,backgroundColor: 'white',marginHorizontal: 15}})

红色部分为核心代码

参考：

/guangqiang-liu/react-native-gradientNavigationBarDemo

本博客地址： wukong1688

本文原文地址：/wukong1688/p/11020748.html

转载请著名出处！谢谢~~