React Native学习之自定义Navigator

Posted 2020-08-14 伟大是熬出来的

有些常用的组件还是留着方便一点.



import React, { Component } from ‘react‘;
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    Platform,
    TouchableOpacity
} from ‘react-native‘;

var Dimensions = require(‘Dimensions‘);
var width = Dimensions.get(‘window‘).width;
var Height = Dimensions.get(‘window‘).height;

var NavigatorView = React.createClass ({
       render() {
          return (
            <View style = {styles.container}>
                {this.renderNavBar()}
            </View>
       );
    },

    renderNavBar() {
        return(
            <View style={styles.NavBarStytle}>
                 <TouchableOpacity activeOpacity={0.5} style={styles.leftViewStytle} onPress={()=> {this.popToHome()}}>
                 <Image source={{uri: ‘nav_btn_back‘}} style={styles.NavLeftImageStyle} />
                 </TouchableOpacity>
                 <Text style={{color: ‘black‘, fontSize: 16, fontWeight: ‘bold‘, bottom:-5}}>{this.props.title}</Text>
            </View>
    )
    },

    popToHome() {
        this.props.navigator.pop();
    },

    pushToDetil(nextVC, titleName) {
        this.props.navigator.push({
            component: nextVC,
            title: titleName,
            passProps: {‘title‘: titleName}
        });
    },
})

const styles = StyleSheet.create({ container: {
    flex: 1,
    alignItems: ‘center‘,
    backgroundColor: ‘#F5FCFF‘,
},

    NavBarStytle: {
        width: width,
        height: Platform.OS == ‘ios‘ ? 64 : 44,
        backgroundColor: ‘#F2F2F2‘,
        flexDirection: ‘row‘,
        alignItems: ‘center‘,
        justifyContent: ‘center‘
    },

    leftViewStytle: {
        position: ‘absolute‘,
        left: 15,
        bottom: 15
    },

    NavLeftImageStyle: {
        width: Platform.OS == ‘ios‘ ? 15 : 15,
        height: Platform.OS == ‘ios‘ ? 15 : 15,
    },
});

module.exports = NavigatorView;