4.2 position 布局

除了 Flexbox 布局，我们还需要结合 position 布局控制界面。

position，它是字符串类型，可以取值为relative(默认值)或者absolute，表示当前描述的位置是相对位置还是绝对定位的。与位置相关样式设置键还有：top、bottom、left、right。它们都是数值类型，表示描述的位置从左或者右多少位置显示，或者从上或者下多少位置显示。

当postion键的值为 relative 时，不可以使用 bottom 和 right 键继续描述位置。top 和 left 键的值默认为0。top 和 left 键表示当前组件距离上一个同级组件最上（左）沿有多少pt。 这个和 html 的 position 有很大的不同，他的相对布局不是相对于父容器，而是相对于兄弟节点。

当position键的值为 absolute 时，描述位置可以使用top、bottom、left、right四个键，表示当前组件的位置距离父组件上（下、左、右）沿有多少单位。 这个和 html 中的 position 也很大不一样。另外还有一个和html 不一样的是，html 中 position:absolute 要求父容器的position 必须是 absolute 或者 relative，如果第一层父容器 position 不是 absolute 或 者relative，在 html 会依次向上递归查询直到找到为止，然后居于找到的父容器绝对定位。

我们之前的代码 CustomTabBar 就用了 position 布局，代码如下：

class CustomTabBar extends Component {
    render() {
        return (
            <View style={{position: 'relative', backgroundColor: '#fff'}}>
                <MaterialTopTabBar {...this.props}/>
                <TouchableOpacity style={{position: 'absolute', right: 12, bottom: 10}}
                                  onPress={() => this.props.navigation.navigate('SearchPage', {
                                      param1: 86,
                                      param2: 'anything you want here'
                                  })}>
                    <Ionicons name={'ios-search-outline'}
                              size={22}
                              color={'#666666'}/>
                </TouchableOpacity>
            </View>
        );
    }
}

查看代码

如果你已经从 GitHub 上克隆了这个程序的 Git 仓库，那么可以执行 git checkout 4a 签出程序的这个版本。