路由

路由是一个App的入口， 由于小程序的路由机制和 React Native（下文简称RN ） 不同， 我们提供了一个路由组件@areslabs/router来抹平差异， 这个路由组件简单易用，具备了大部分你需要的功能。 @areslabs/router 在 RN 端是基于react-navigation封装，而在微信小程序端使用的是微信小程序系统自带的路由。

1. 无Tab

底部没有Tab的应用

import {
    Router,
    Route,
} from '@areslabs/router'

class App extends Component{
  render() {
    return (
      <Router>
          <Route key="A" component={A}/>
          <Route key="B" component={B}/>
          <Route key="D" component={D}/>
      </Router>
    )
  }
}

Router组件有2个属性 key 和 component。这里默认首屏展示 A 页

2. 多Tab页

多Tab页应用

import {
    Router,
    Route,
    TabRouter
} from '@areslabs/router'

class JDReactFirst extends Component{
  render() {
    return (
      <Router>
          <TabRouter text="F" image={faxianPNG} selectedImage={faxianCurrentPNG}>
              <Route key="A" component={A}/>
              <Route key="B" component={B}/>
              <Route key="D" component={D}/>
          </TabRouter>

          <TabRouter text="S" image={myPNG} selectedImage={myCurrentPNG}>
              <Route key="C" component={C}/>
          </TabRouter>
      </Router>
    )
  }
}

TabRouter提供了3个属性：text、 image、 selectedImage。这里默认首屏展示 A 页

3. 页面间切换

import {
    history
} from '@areslabs/router'

history.push('B') // 切换到B页

history.push('B', {
    id: 1,
})  // 切换到B页, 参数为 {id: 1}

在B页获取路由参数的方式如下：

this.props.routerParams

history的所有API

4. 指定入口页

RN端支持在 Router 和 TabRouter 上指定 initRoute 属性。

注意 小程序端不支持

5. 自定义header

微信小程序的Header比较固定，可以定制的部分很少， 而React Native的Header可以完全的定制， 这里对Header的定制两个平台是不一样的。

首先是RN端的Header ， 由于在RN端@areslabs/router底层实现就是react-navigation。所以定制Header 的方法和react-navigation完全一样， 具体参考： RN端的定义方式

class A extends Component {
    static navigationOptions = ({ navigation }) => {
        console.log('navigation:', navigation)
        return {
            headerTitle: <Text>HTTT</Text>,
        };
    }
}

小程序的Header 大体样式由微信决定。可以指定navigationBar 的title， 背景色(只能是black / white)，导航栏标题文字内容。 指定方法如下：

class A extends Component {
    static wxNavigationOptions = {
                    navigationBarBackgroundColor: "#ffffff",
                    navigationBarTextStyle: "black",
                    navigationBarTitleText: "HTTT",
                }

    ...
}

大部分情况下， 我们所有页面的navigationBar样式都是一致的， 对于这种情况没有必要在每一个页面里面定义， 这两种定义方法都支持在Router中全局定义

<Router
    wxNavigationOptions={{
        navigationBarBackgroundColor: "#ffffff",
    }}

    navigationOptions={{}}
>
    <Route key="A" component={A}/>
</Router>

如果页面和全局都对Header进行了定义呢？ 页面上定义的options 优先级大于 全局定义的options

注意 这里RN端的字段是navigationOptions， 小程序端的字段是wxNavigationOptions， 另外由于小程序的限制 wxNavigationOptions 必须是对象字面量， 无论是在类里面定义还是全局定义

页面切换的生命周期

提供2个额外的页面切换的生命周期， 注意这两个生命周期只存在于页面组件。

页面展示声明周期： componentDidFocus

页面隐藏声明周期： componentWillUnfocus

注意点

无论何种情况，你的RN项目都应该是由Router开始。 即使你只有一个页面，也需要配置路由：

class App extends Component {
    render() {
        return (
            <Router>
              <Route key="A" component={A}/>
            </Router>
        )
    }
}

这个文件要求必须足够的静态， 具体请看