美文网首页
导航组件 NavigatorIOS

导航组件 NavigatorIOS

作者: longsan0918 | 来源:发表于2017-08-11 10:16 被阅读56次

    1 属性:
    barTintColor : 导航条的背景颜色
    initalRoute : 在RN 中导航名为“路由”(学过网络的应该明白这个词的意思), 作用就是指路的,大家可以这么理解,这个属性是一个方法,用来初始化导航的。
    itemWrapperStyle : 为每一项定制样式,例如设置每一个页面的背景颜色
    navigationBarHidden : 为true , 隐藏导航栏。
    shadowHidden : 是否隐藏阴影,true/false。
    tintColor : 导航栏上按钮的颜色设置。
    titleTextColor : 导航栏上字体的颜色 。
    translucent : 导航栏是否是半透明的,true/false。
    push(route) : 加载一个新的界面(视图或者路由)并且路由到该界面。
    pop() : 返回到上一个页面。
    popN(n) : 一次性返回N个界面,当n = 1 时,即相当于pop()方法的效果。
    replace(route):替换当前的路由。
    replacePrevious(route) : 替换前一个页面的视图并且回退过去。
    resetTo(route) : 取代最顶层的路由并且回退过去。
    popToTop() : 回到最上层视图。

    带动画导航组件
    <NavigatorIOS
                initialRoute={{
                  title:"首页",//标题
                  component:Home,  // 要跳转的板块
                }}
                shadowHidden={true} // 隐藏导航栏下面的阴影
    
                interactivePopGestureEnabled={true} // 决定是否启用滑动返回手势
                style={styles.container}
    
                configureScene={(route) => {    // 跳转动画
                  return Navigator.SceneConfigs.FloatFromBottom;
                }}
                renderScene={(route, navigator) => {    // 将板块生成具体的组件
                  let Component = route.component;    // 获取路由内的板块
                  return <Component {...route.params} navigator={navigator} />    // 根据板块生成具体组件
                }}
            />
    
    /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     * @flow
     */
    
    import React, { Component } from 'react';
    import {
      AppRegistry,
      StyleSheet,
      Text,
      View,
      NavigatorIOS,
        TouchableOpacity,
    
    } from 'react-native';
    
    const FirstView = require('./MainBLL/FirstView');
    
    export class NaviOS extends Component {
      render() {
        return (
    
          <NavigatorIOS
              ref='nav'
              style={{flex:1}}
              initialRoute={{
            component:FirstView,
            title:'首页',
            rightButtonTitle:'下一页',
            leftButtonTitle:'左边',   // 实例化左边按钮
            onLeftButtonPress:() => {alert('左边')},  // 左边按钮点击事件
            rightButtonTitle:'右边',  // 实例化右边按钮
            onRightButtonPress:() => {alert('右边')},// 右边按钮点击事件
            passProps: {},
    
          }}></NavigatorIOS>
        );
      }
    
    }
    
    
    AppRegistry.registerComponent('NaviOS', () => NaviOS);
    
    /**
     * Created by long on 2017/8/10.
     */
    import React,{Component} from 'react';
    import {
        View,
        Text,
        TouchableOpacity,
        StyleSheet,
    } from 'react-native';
    
    const  SecondView = require('./SecondView');
    class FirstView extends Component{
    
        render(){
            return(
                <View style={styles.container}>
                    <TouchableOpacity onPress = {() => {this.props.navigator.push({
                        component:SecondView,
                        title:'第二页',
                        passProps:{
                            showText:'传值',
                        }
                    })}}>
    
    
                        <Text>点我</Text>
                    </TouchableOpacity>
    
    
                </View>
            );
    
        }
    }
    
    const styles = StyleSheet.create({
            container:{
            backgroundColor:'yellow',
            flex:1,
            justifyContent:'center',
            alignItems:'center'
        },
     });
    
    
    module.exports = FirstView;
    
    /**
     * Created by long on 2017/8/10.
     */
    /**
     * Created by long on 2017/8/10.
     */
    import React,{Component} from 'react';
    import {
        View,
        Text,
        TouchableOpacity,
        StyleSheet,
    } from 'react-native';
    
    class SecondView extends Component{
        render(){
            return(
                <View style = {styles.container}>
                    <TouchableOpacity onPress={()=>{this.props.navigator.pop()}}>
                        <Text>{this.props.showText}</Text>
                    </TouchableOpacity>
                </View>
            );
        }}
    
    const styles = StyleSheet.create({
        container: {
            backgroundColor:'green',
            flex:1,
            justifyContent:'center',
            alignItems:'center'
        },
    });
    
    module.exports = SecondView;
    

    效果图:


    hah.gif

    参考资料:
    http://blog.csdn.net/wxs0124/article/details/50608845

    相关文章

      网友评论

          本文标题:导航组件 NavigatorIOS

          本文链接:https://www.haomeiwen.com/subject/jbhlrxtx.html