# `` 基础页面
BasePage 定义一个基础页面组件, 是 Page 的抽象封装, 需要派生出新的类来使用, 提供一系列易于使用的可重写方法, 和 TeaNavigator 搭配使用可大大简化页面跳转代码。
## Props
| Prop | Type | Default | Note |
|---|---|---|---|
| [View props...](https://facebook.github.io/react-native/docs/view.html) | | | BasePage 组件继承 View 组件的全部属性。
| scene | object | Navigator.SceneConfigs.Replace | 默认转场效果, 与 TeaNavigator 搭配使用时, 如没在 route 中指定 scene 则自动取此属性使用。
| autoKeyboardInsets | bool | true(iOS)
false(Android) | 在弹出键盘时是否自动插入键盘占用空间, 插入键盘占用空间的目的是避免页面内容被键盘遮挡。
| keyboardTopInsets | number | 0 | 键盘占用空间顶部偏移量。
## Variables
| Variable | Type | Notes |
|---|---|---|
| navigator | Navigator | 返回 TeaNavigator 封装的 navigator。
这是一个只读属性变量。
| didMount | bool | componentDidMount 是否已调用, 代替 React 废弃的 isMounted。
| isFocused | bool | 是否已聚焦到此页面。
## Methods
| Method | Params | Returns | Notes |
|---|---|---|---|
| onWillFocus | | | 将要聚焦到此页面, 在页面转场动画开始前调用。
在派生类中重写此函数执行所需操作。
| onDidFocus | | | 已经聚焦到此页面, 在页面转场动画结束后调用。
在派生类中重写此函数执行所需操作。
如果页面初始化有较耗时的操作, 在初始化过程中容易引起页面转场动画卡顿, 建议把复杂的初始化代码放到此函数中处理。
| onHardwareBackPress | | bool | 当用户按下返回键(物理键, Android only)时调用。
默认返回上一页, 如为根页面则退出程序。
在派生类中重写此函数执行所需操作, 返回 true 表示已接管此次调用。
| renderPage | | element | 页面渲染函数, BasePage 所有派生类都应该重写此函数渲染界面, 而不是 render 函数。
## Example
简单用法
```
import React from 'react';
import {Navigator, View} from 'react-native';
import {BasePage, Input, Button} from 'teaset';
export default class Login extends BasePage {
static defaultProps = {
...BasePage.defaultProps,
scene: Navigator.SceneConfigs.FloatFromBottom,
};
constructor(props) {
super(props);
Object.assign(this.state, {
userName: null,
password: null,
});
}
renderPage() {
return (
this.setState({userName: text})}
/>
this.setState({password: text})}
/>
);
}
}
```