说明：

 Navigator是对trc自定义组件trc-custom-navigator的再封装，而trc-custom-navigator是对官方导航组件react-native-deprecated-custom-components的再封装，并对部分源码进行修改，更加符合项目需要。

使用理由：react-native-deprecated-custom-components组件虽然在0.43版本后被移出react-native库，以单独组件存在，但react-native-deprecated-custom-components历经了多个版本，已经很稳定，使用也很灵活。


Navigator用法：
import { Navigator } from 'trc-common';

import HomeScreen from './Screens/HomeScreen';

export default class AppClass extends Component {

    render() {
        return (
            <Navigator initialRoute={{title:'Home', component: HomeScreen}}/>
        )
    }
}


路由route解释:

Navigator作为导航器，是根据route进行跳转的，route是一个对象，navigator使用它来区分不同的页面，一个route就代表一个页面，第一个页面(根页面)用initialRoute初始化。

initialRoute 初始化格式为：initialRoute={{title:'Home', component: HomeScreen}}

其中：title为标题，component为要渲染的页面组件。

官方对initialRoute 的解释：The initial route for navigation.A route is an object that the navigator will use to identify each scene it renders.


导航跳转：

使用push跳转新页面时，示例如下：
import DetailScreen from './DetailScreen';

export default class HomeScreenClass extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Button title='跳转到Detail'
                        onPress={()=>{
                            this.props.navigator.push({
                                title:"Detail",
                                component:DetailScreen
                            })
                        }}/>
            </View>
        )
    }
}

跳转时，也即为push一个新的route对象，需要传入component，即目标页面组件。title为目标页面的标题（也可以不传，下面会说到）。


导航栏NavBar:

 封装的Navigator中，默认包含导航栏组件NavigationBar，不需要在初始化时再进行声明。

1.隐藏全局导航栏：

 在使用Navigator时，若不需要导航栏，可以使用allPagesHiddenNavBar字段，控制全局隐藏导航栏，默认为false。

2.隐藏单个页面导航栏

  封装后，Navigator支持单个页面隐藏导航栏。

 若某个页面A不需要导航栏，可通过设置静态变量的方式进行隐藏。
static hiddenNavBar = true;

如下图：

导航栏已适配安卓&iOS，安卓共用iOS风格。

导航栏元素：

1.返回按钮

①支持隐藏某一个页面返回按钮，只需在该页面声明静态变量hiddenNavBarBackButton，并赋值true即可。默认为false。

②支持拦截返回按钮点击事件，只需在该页面componentDidMount中做以下操作即可，如图：

注意：安卓的返回按钮样式为：返回箭头，iOS返回按钮样式为：返回箭头 + “返回”二字。


2.标题：

   有两种方式设置导航栏标题

方式一：即为push页面A时，在route里写明title，title即为页面A标题。
this.props.navigator.push({
    title:"Detail",
    component:DetailScreen
})



方式二：在页面A中，通过静态变量进行设置，如下图：

注意：如果通过方式一与方式二同时设置了title，则方式二的title有效，方式一设置的无效。


3.右上角按钮

右上角按钮只有在设置了rightBarButtonTitle的情况下，才会显示。默认情况下，不显示右上角按钮。

①设置rightBarButtonTitle方式同设置标题方式相同，如上。

②支持拦截右上角按钮点击事件，只需在该页面componentDidMount中做以下操作即可，如图：

适配安卓沉浸式：

在AppStart中进行如下设置：
componentWillMount() {
    if (SystemTools.isAndroid) {
        StatusBar.setBackgroundColor('#f8f8f8');
        StatusBar.setBarStyle('dark-content', true);
    }
}