[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' ?  : ) + 

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

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