React Native学习之自定义Navigator

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

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;