React Native - NavigatorIOS

作者: 村雨灬龑 | 来源:发表于2017-11-15 11:59 被阅读36次

NavigatorIOS 是包装了UIKit 库的导航功能，使用户可以使用左划功能来返回到上一界面

NavigatorIOS 属性

barTintColor： 导航栏背景颜色,只设置当前界面的导航栏背景颜色
initialRoute() 使用“路由”对象来包含要渲染的子视图、它们的属性、已经导航条配置。“push”和任何其他的导航函数的参数都是这样的路由对象（下面实例模块会详细讲解）

        initialRoute（{
            component: function,
            title: string,
            passProps: object,
            backButtonIcon: Image.propTypes.source,//返回按钮的图片
            backButtonTitle: string,//返回按钮的 title
            leftButtonIcon: Image.propTypes.source,// 左按钮图片
            leftButtonTitle: string,
            onLeftButtonPress: function,
            rightButtonIcon: Image.propTypes.source,
            rightButtonTitle: string,
            onRightButtonPress: function,
            wrapperStyle: [object Object]//包裹样式
        })

itemWrapperStyle： 导航器中的组件的默认属性。一个常见的用途是设置所有页面的背景颜色
navigationBarHidden： 一个布尔值，决定导航栏是否隐藏。
shadowHidden：布尔值，决定是否要隐藏1像素的阴影

1像素的阴影.png
tintColor：导航栏上按钮的颜色
titleTextColor：导航器标题的文字颜色
translucent：布尔值，决定导航条是否半透明(注：当不半透明时页面会向下移动导航栏等高的距离,以防止内容被遮盖)
interactivePopGestureEnabled：决定是否启用滑动返回手势。不指定此属性时，手势会根据 navigationBar 的显隐情况决定是否启用（显示时启用手势，隐藏时禁用手势），指定此属性后，手势与 navigationBar 的显隐情况无关
passProps: 父传给子的对象 myProp

         passProps: { myProp: 'temp 传给 computer 的值' },

子类调用:

          alert(this.props.myProp);

NavigatorIOS 方法

push(route)：导航器跳转到一个新的路由
pop()：回到上一页
popN()：回到N页之前。当 N=1 的时候，效果和 pop() 一样,1是最近的一层,想要调到第 n层就是N=n+1
replace(route)：替换当前页的路由，并立即加载新路由的视图
replacePrevious(route)：替换上一页的路由/视图
replacePreviousAndPop(route)替换上一页的路由/视图并且立即切换回上一页
resetTO(route)：替换最顶级的路由并且回到它
replaceAtIndex：替换指定路由
popToRoute(route)：一直回到某个指定的路由
popToTop() 回到最顶层的路由

NavigatorIOS 使用

NavigatorIOS 需要有一个根视图来完成初始化，所以我们需要先创建一个组件来描述这个界面，并将这个组件通过路由的形式告诉 NavigatorIOS，这样就可以将这个界面展示出来

代码例子:

在index.ios.js内获得 Home 组件

import Home from './home';

class RNTalk extends Component {
  render() {
    return (
      <Home />
    );
  }
}

// 整体js模块的名称
AppRegistry.registerComponent('RNTalk', () => RNTalk);

home.js

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    NavigatorIOS,
} from 'react-native';

//导入子页面 
import Temp from './temp';

//导航栏 初始化NavigatorIOS 用 Home 作为 NavigatorIOS 的根视图
class ReactNativeNavigator extends Component{
    render (){
        return(
            <NavigatorIOS 
            style={{flex:1}} // 此项不设置,创建的导航控制器只能看见导航条而看不到界面
            interactivePopGestureEnabled={true}//决定是否启用滑动返回手势。
            itemWrapperStyle='blue'
            translucent={true}//决定导航条是否半透明
            initialRoute={{//初始化路由
                component:Home,//路由的根视图
                title:'首页',//标题
                }}/>
        );
    }
}

class Home extends Component{
    //点击跳转
    _onPressView (nextRoute){
        //跳转  nextRoute 目的地的路由
        this.props.navigator.push(nextRoute);
    }

    render() {
        //目的地的路由属性
        const nextRoute = {
            component:Temp,//目的地视图
            title:'详情页码',//目的地标题
            titleTextColor:'red',//标题颜色
            shadowHidden:true,//决定是否要隐藏1像素的阴影
            barTintColor:'white',//导航条的背景颜色
            tintColor:'orange',  // 按钮的颜色
            leftButtonTitle:'返回',//导航条的左按钮
            onLeftButtonPress:()=>{//导航条左按钮触发事件
                alert('返回');
            },
            rightButtonTitle:'相册',//导航条的右按钮
            onRightButtonPress:()=>{//导航条右按钮触发事件
                alert('没有该照片');
            },
            itemWrapperStyle:'green',//没有效果 没找到原因
            passProps: { myProp: 'bar' }
          };
        return (
            <View style={styles.container}>  
            <TouchableOpacity onPress={() => {this._onPressView(nextRoute)}}>
            <Text style={styles.textContainer}>点击跳转到 Temp 界面</Text>
            </TouchableOpacity>
        </View>
        );
    }
}
var styles = StyleSheet.create({
    container:{
        // 背景颜色
        backgroundColor:'red',
        flex:1,
        justifyContent:'center',
        alignItems:'center',
    },
    textContainer:{
        fontSize:20,
    }
});

module.exports = ReactNativeNavigator;

temp.js

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    NavigatorIOS,
    TouchableOpacity
} from 'react-native';

import Computer from './computer';
class Temp extends Component{
    _toComputerView(isShadowHidden){
        this.props.navigator.push({
           component:Computer,
           title:'电脑详情',
           rightButtonTitle:'配置',
           navigationBarHidden:isShadowHidden,// 隐藏导航栏
           shadowHidden:true,//决定是否要隐藏1像素的阴影
           onRightButtonPress:()=>{
                alert('CUP  i7');
           },
           passProps: { myProp: 'temp 传给 computer 的值' },
        });
    }
    render(){
        return(
            <View style={styles.container}>
                <TouchableOpacity onPress={() => this._toComputerView(false)}>
                    <Text style={styles.textContainer}>电脑详情(有导航栏)</Text>
                </TouchableOpacity>
                <Text/>
                <TouchableOpacity onPress={() => this._toComputerView(true)}>
                    <Text style={styles.textContainer}>电脑详情(无导航栏)</Text>
                </TouchableOpacity>
                <Text/>
                <TouchableOpacity onPress={() => {this.props.navigator.pop()}}>
                    <Text style={styles.textContainer}>返回上一页面</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

var styles = StyleSheet.create({
    container:{
        // 背景颜色
        backgroundColor:'white',
        flex:1,
        justifyContent:'center',
        alignItems:'center',
    },
    textContainer:{
        fontSize:20,
    }
});
//相当于将组件 Temp 公开出 去将私有的变成共有
module.exports = Temp;

computer.js

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    NavigatorIOS,
    TouchableOpacity
} from 'react-native';

class Computer extends Component{
    _alertMyProp(){
        alert(this.props.myProp);
    }
    render(){
        return(
            <View style={styles.container}>
                <TouchableOpacity onPress={() => {this.props.navigator.pop()}}>
                <Text style={styles.textContainer}>返回上一页面</Text>
                </TouchableOpacity>
                <Text>    </Text>
                <TouchableOpacity onPress={() => {this.props.navigator.popN(2)}}>
                <Text style={styles.textContainer}>返回首页</Text>
                </TouchableOpacity>
                <Text>    </Text>
                <TouchableOpacity onPress={() => {this.props.navigator.popToTop()}}>
                <Text style={styles.textContainer}>回到最顶层的路由</Text>
                </TouchableOpacity>
                <Text>    </Text>
                <TouchableOpacity onPress={() => {this._alertMyProp()}}>
                <Text style={styles.textContainer}>展示传值</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

var styles = StyleSheet.create({
    container: {
        backgroundColor:'yellow',
        flex:1,
        justifyContent:'center',
        alignItems:'center'
    },
    textContainer:{
        fontSize:20,
    }
});
//相当于将组件 Temp 公开出 去将私有的变成共有
module.exports = Computer;

React Native - NavigatorIOS

NavigatorIOS 属性

NavigatorIOS 方法

NavigatorIOS 使用

代码例子:

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

React Native