# 小程序路由

# 概述

Navigator 小程序路由组件。

# 顶部导航 api

Name Description
title 标题,必填
color 文本和 icon 颜色,非必填
backgroundColor 背景色,非必填
hideBack 隐藏回退按键,非必填
buttonBorderColor 右侧按钮边框色, 非必填

注意:自定义颜色后不支持暗黑模式,需根据暗黑去做颜色的调整,具体参考暗黑模式章节

# 组件使用

import React, { Component } from 'react';
import { Navigator } from '@ezviz/mini-sdk';

export default class Demo extends Component {
  render() {
    return (
      <Navigator
        routes={{
          Page1: { screen: Page1 },
          Page2: { screen: Page2 },
          Page3: { screen: Page3 },
        }}
        defaultRoute='Page1'
      />
    );
  }
}

# 子页面

import React, { Component } from 'react';
import { View } from 'react-native';

export default class Page1 extends Component {
  // 标题栏增加此配置即可
  static navigationOptions = () => ({
    title: 'Page1标题',
    hideBack: true,
  });

  render() {
    return <View />;
  }
}

# 动态变更标题

import React, { Component } from 'react';
import { View } from 'react-native';

export default class Page2 extends Component {
  // 标题栏增加此配置即可
  static navigationOptions = ({ navigation }) => ({
    title: 'Page2标题',
    hideBack: true,
    color: navigation.getParam('titleColor'),
  });

  constructor(props) {
    super(props);
    // 在需要动态变更的地方通过navigation将参数传递过去
    this.props.navigation.setParams({ titleColor: '#333333' });
  }

  render() {
    return <View />;
  }
}