路由

路由是一个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个属性 keycomponent。这里默认首屏展示 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个属性:textimageselectedImage。这里默认首屏展示 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

API 描述
push(key, [params]) 跳转, 在目标页可以通过this.props.routerParams 获取params
replace(key, [params]) 替换,路由栈不增长
pop(n = 1) 返回n指定的页面数,n默认是1
back() 返回上一页,等效与pop(1), pop()
popToTop 返回到首页
popTo(key) 返回到key页
popToWithProps(key, newParams) 返回到key页,并设置路由参数为newParams
getCurrentRoutes 获取当前路由栈

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>
        )
    }
}

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

results matching ""

    No results matching ""