[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) + 90

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: 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 = 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: 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.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([0, 1, 2, 3, 4, 5, 6, 7, 8, 9])
        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: 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
    }
})

 

紅色部分為核心代碼

 

參考：

https://github.com/guangqiang-liu/react-native-gradientNavigationBarDemo

 

本博客地址： wukong1688

本文原文地址：https://www.cnblogs.com/wukong1688/p/11020748.html

轉載請著名出處！謝謝~~