• 替代 Navigator 组件


    前言:最近在研究 react-native 时,突然发现 Navigator 组件被 react-native 包 抛弃了。现总结了几种替代方法。

    方法一:引入 react-native-deprecated-custom-components 组件

    npm install react-native-deprecated-custom-components --save
    
    import CustomerComponents, { Navigator } from 'react-native-deprecated-custom-components'; // 引入

    方法二:引入 react-navigation 组件

    npm install react-navigation --save

    官网:https://reactnavigation.org/docs/intro/

     demo-1

    BasicApp.js

    import {
      StackNavigator,
    } from 'react-navigation';
    
    const BasicApp = StackNavigator({
      Main: {screen: MainScreen},
      Profile: {screen: ProfileScreen},
    });
    

    MainScreen.js

    class MainScreen extends React.Component {
      static navigationOptions = {
        title: 'Welcome',
      };
      render() {
        const { navigate } = this.props.navigation;
        return (
          <Button
            title="Go to Jane's profile"
            onPress={() =>
              navigate('Profile', { name: 'Jane' })
            }
          />
        );
      }
    }
    

    ProfileScreen.js

    class ProfileScreen extends React.Component {
      static navigationOptions = ({navigation}) => ({
        title: navigation.state.params.name,
      });
      render() {
        const { goBack } = this.props.navigation;
        return (
          <Button
            title="Go back"
            onPress={() => goBack()}
          />
        );
      }
    }
    

    效果图:

    android

    ios

    demo-2:

    BasicApp.js

    import {
      TabNavigator,
    } from 'react-navigation';
    
    const BasicApp = TabNavigator({
      Main: {screen: MainScreen},
      Setup: {screen: SetupScreen},
    });

    MainScreen.js

    class MainScreen extends React.Component {
      static navigationOptions = {
        tabBarLabel: 'Home',
      };
      render() {
        const { navigate } = this.props.navigation;
        return (
          <Button
            title="Go to Setup Tab"
            onPress={() => navigate('Setup')}
          />
        );
      }
    }

    SetupScreen.js

    class SetupScreen extends React.Component {
      static navigationOptions = {
        tabBarLabel: 'Setup',
      };
      render() {
        const { goBack } = this.props.navigation;
        return (
          <Button
            title="Go back to home tab"
            onPress={() => goBack()}
          />
        );
      }
    }

    效果:

    android

    ios

    方法三:自定义 Navigator 组件

    首先导入组件

    var MLNavigator = require('../Lib/MLNavigator');
    

    然后使用

    <MLNavigator
            leftIconName = 'nav_btn_back'
            title = '我的导航'
            rightIconName = 'nav_btn_back'
            rightTitle = '右边标题'
            callBackLeftClick = {()=> this.popToHome()}
            callBackRightClick = {()=> this.popToHome()}
        />
    

    定义的一些属性:

     leftIconName: '',    // 左边图片
        leftTitle: '',       // 左边标题
        title: '',           // 标题
        rightIconName: '',   // 右边图片
        rightTitle: '',      // 右边标题
        callBackLeftClick: null,   // 左边回调
        callBackRightClick: null,  // 右边回调
        leftTitleFontSize: 14,     // 左边标题的字体大小
        titleFontSize: 16,         // 标题的字体大小
        rightTitleFontSize: 14,    // 右边标题的字体大小
        leftTitleColor: '#666666',     // 左边标题的字体颜色
        titleColor: 'black',         // 标题的字体颜色
        rightTitleColor: '#666666',    // 右边标题的字体颜色
    

    组件封装:

    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 MLNavigator = React.createClass ({
    
        getDefaultProps() {
            return{
                leftIconName: '',    // 左边图片
                leftTitle: '',       // 左边标题
    
                title: '',           // 标题
    
                rightIconName: '',   // 右边图片
                rightTitle: '',      // 右边标题
    
                callBackLeftClick: null,   // 左边回调
                callBackRightClick: null,  // 右边回调
    
                leftTitleFontSize: 14,     // 左边标题的字体大小
                titleFontSize: 16,         // 标题的字体大小
                rightTitleFontSize: 14,    // 右边标题的字体大小
    
                leftTitleColor: '#666666',     // 左边标题的字体颜色
                titleColor: 'black',         // 标题的字体颜色
                rightTitleColor: '#666666',    // 右边标题的字体颜色
    
            }
        },
    
        render() {
            return (
                <View style={styles.NavBarStytle}>
                    {/* 左边 */}
                    {this.navLeftView()}
    
                    <Text style={{color: this.props.titleColor, fontSize: this.props.titleFontSize, fontWeight: 'bold', bottom:-10}}>{this.props.title}</Text>
    
                    {/* 右边 */}
                    {this.navRightView()}
    
                </View>
            );
        },
    
    
        navLeftView() {
    
            if(this.props.leftIconName){
                return(
                    <TouchableOpacity activeOpacity={0.5} style={styles.leftViewStytle} onPress={()=> {this.props.callBackLeftClick()}}>
                        <Image source={{uri: this.props.leftIconName}} style={styles.NavLeftImageStyle} />
                    </TouchableOpacity>
                )
            }else {
                return(
                    <TouchableOpacity activeOpacity={0.5} style={styles.leftViewStytle} onPress={()=> {this.props.callBackLeftClick()}}>
                        <Text style={{color: this.props.leftTitleColor, fontSize: this.props.leftTitleFontSize, bottom:-2}}>{this.props.rightTitle}</Text>
                    </TouchableOpacity>
                )
            }
        },
    
        navRightView() {
            if(this.props.rightIconName){
                return(
                    <TouchableOpacity activeOpacity={0.5} style={styles.rightViewStytle} onPress={()=> {this.props.callBackRightClick()}}>
                        <Image source={{uri: this.props.rightIconName}} style={styles.NavRightImageStyle} />
                    </TouchableOpacity>
            )
            }else {
                return(
                    <TouchableOpacity activeOpacity={0.5} style={styles.rightViewStytle} onPress={()=> {this.props.callBackRightClick()}}>
                        <Text style={{color: this.props.rightTitleColor, fontSize: this.props.rightTitleFontSize, bottom:-2}}>{this.props.rightTitle}</Text>
                    </TouchableOpacity>
                 )
            }
        },
    
    })
    
    const styles = StyleSheet.create({
        NavBarStytle: {
             width,
            height: Platform.OS == 'ios' ? 64 : 44,
            backgroundColor: '#F2F2F2',
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'center'
        },
    
        leftViewStytle: {
            position: 'absolute',
            left: 15,
            bottom: 15
        },
    
        NavLeftImageStyle: {
             Platform.OS == 'ios' ? 15 : 15,
            height: Platform.OS == 'ios' ? 15 : 15,
        },
    
        rightViewStytle: {
            position: 'absolute',
            right: 15,
            bottom: 15
        },
    
        NavRightImageStyle: {
             Platform.OS == 'ios' ? 15 : 15,
            height: Platform.OS == 'ios' ? 15 : 15,
        },
    });
    
    module.exports = MLNavigator;
    

    .

  • 相关阅读:
    Transfer: Javascript实现网页水印(非图片水印)
    VirtualPathUtility class from MSDN
    深入理解Flink 系统内部消息传递的exactly once语义
    深入理解Flink EndtoEnd ExactlyOnce语义
    深入理解Flink Metrics的内部结构
    深度优化sql 查询, 提升性能一百倍是什么概念?
    asp.net mvc+asp.net webform: a way of RIA + RAD
    使用scheduled task, 让电脑音乐伴你入眠
    A small breaking change in IE8 causing big pain in the ass: the default type of button element
    tsql 和 clr 的性能实测比对
  • 原文地址:https://www.cnblogs.com/crazycode2/p/7198554.html
Copyright © 2020-2023  润新知