ReactNative-NavigatorIOS/Navigator(十一)

NavigatorIOS作用：用来iOS上界面之间的跳转。

一、NavigatorIOS常用属性：

barTintColor:背景颜色
navigationBarHidden：隐藏导航栏
shadowHidden：隐藏阴影
tintColor：按钮颜色
titleTextColor：字体颜色
translucent：是否半透明

二、NavigatorIOS使用步骤

注意：导航一定要有尺寸，flex:1，否则看不到子控件
获取导航：只要是导航下子组件，就能获取导航；当前子组件props自动有两个属性：route,navigator
this.props.navigator
NavigatorIOS弊端:
- 1.默认图片是渲染,而且没法修改渲染状态
- 2.不能显示两张图片
- 3.不能同时展示图片和文字
- 4.不能跨平台

1.初始化路由

initialRoute：用于初始化路由。其参数对象中的各个属性如下： {
 
component: function, //加载的视图组件 
title: string, //当前视图的标题 
passPros: object, //传递的数据 
backButtonIcon: Image.propTypes.source, // 后退按钮图标
backButtonTitle: string, //后退按钮标题
leftButtonIcon: Image.propTypes.soruce, // 左侧按钮图标
leftButtonTitle: string, //左侧按钮标题
onLeftButtonPress: function, //左侧按钮点击事件
rightButtonIcon: Image.propTypes.soruce, // 右侧按钮图标
rightButtonTitle: string, //右侧按钮标题
onRightButtonPress: function, //右侧按钮点击事件
}

2.设置尺寸
style={{flex:1}}

3.页面跳转方法

push()：加载新界面
pop()：返回
popN(n):一次性返回n个页面
replace(route)：替换当前的路由。
replacePrevious（route）：替换前一个页面的视图并且回退过去。
resetTo(route)：取代最顶层的路由并且回退过去。
popToTop()：回到最上层视图。

代码示例：

import React, {Component} from 'react'
import
{
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Button,
    TextInput,
    Image,
    Dimensions,
    NavigatorIOS
}
    from 'react-native'

class XMGTwoView extends Component {
    render(){
        return (
            <View style={{backgroundColor:'green',justifyContent:'center',alignItems:'center',flex:1}}>
                <Text>第二个界面</Text>
                <Text onPress={()=>{
                    3.获取导航页面跳转
                    this.props.navigator.pop();
                }}>返回</Text>
            </View>
        )
    }
}

class XMGOneView extends Component {
    render(){
        return (
            <View style={{backgroundColor:'red',justifyContent:'center',alignItems:'center',flex:1}}>
                <Text>第一个界面</Text>
                <Text onPress={()=>{
                    3.获取导航页面跳转
                    this.props.navigator.push({
                        component:XMGTwoView,
                        title:'详情页',
                    })
                    {/*console.log(this.props);*/}
                }}>跳转</Text>
            </View>
        )
    }
}

class ReactDemo extends Component {
    render(){
        return (
            1.初始化路由
            <NavigatorIOS initialRoute={
            {
                component:XMGOneView,
                title:'首页',
                leftButtonTitle:'左边',
                rightButtonIcon:{uri:'navigationbar_friendattention'}
            }
            }
                          2.设置尺寸
                          style={{flex:1}}
                          titleTextColor='blue'
                          tintColor='black'
            />
        )
    }
}
var styles = StyleSheet.create({
})
AppRegistry.registerComponent('ReactDemo',()=>ReactDemo);

Navigator作用：安卓与iOS界面之间的跳转

一、Navigator使用步骤

1.初始化路由: initialRoute，描述最开始的界面
initialRoute={{component:HomeView}}

2.配置场景: configureScene(route, routeStack)，设置跳转方向

    _configureScene(route, routeStack) {
        return Navigator.SceneConfigs.PushFromLeft;
    }

3.渲染场景: renderScene(route, navigator)，根据路由，生成组件

_renderScene(route, navigator) {
// 类似<HomeView navigator={navigator} {...route.props}/>
// ...route.props: 获取route中所有属性,传递给HomeView
// ...扩展符, 作用:如果是对象,就获取对象中所有值,如果是数组,就获取数组中所有值
    return (<route.component navigator={navigator} {... route.props}/>)
}

4.设置尺寸
style={{flex:1}}

5.跳转界面同NavigatorIOS

使用代码示例：

import React, {Component} from 'react'
import
{
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Button,
    TextInput,
    Image,
    Dimensions,
}
    from 'react-native'

import {Navigator} from 'react-native-deprecated-custom-components'

class XMGTwoView extends Component {
    render(){
        return (
            <View style={{backgroundColor:'green',justifyContent:'center',alignItems:'center',flex:1}}>
                <Text>第二个界面</Text>
                <Text onPress={()=>{
                    5.跳转界面同NavigatorIOS
                    this.props.navigator.pop();
                }}>返回</Text>
            </View>
        )
    }
}

class XMGOneView extends Component {
    render(){
        return (
            <View style={{backgroundColor:'red',justifyContent:'center',alignItems:'center',flex:1}}>
                <Text>第一个界面</Text>
                <Text onPress={()=>{
                    5.跳转界面同NavigatorIOS
                    this.props.navigator.push({
                        component:XMGTwoView
                    })
                }}>跳转</Text>
            </View>
        )
    }
}

class ReactDemo extends Component {
    // 3.渲染场景，根据路由，生成组件
    _renderScene(route, navigator){
        return (<route.component navigator={navigator} {...route}/>)
    }

    // 2.配置场景，设置跳转方向
    _configureScene(){
        return Navigator.SceneConfigs.PushFromRight;
    }

    render(){
        return (
           1.初始化路由
            <Navigator initialRoute={
            {
                component: XMGOneView,
                title: 'xmg',
                age: 0
            }
            }
                       4.设置尺寸
                       style={{flex:1}}
                       renderScene={this._renderScene.bind(this)}
                       configureScene={this._configureScene.bind(this)}
            />
        )
    }
}
var styles = StyleSheet.create({
})
AppRegistry.registerComponent('ReactDemo',()=>ReactDemo);