游戏的界面如下
CrosswordPuzzle
从设计图可以看出页面主要分为3部分，顶部提示Note、棋盘和底部栏，React Native是使用Flex语法做布局的，这种格局咋一看就觉得应该使用justifyContent: 'space-around'来实现两端对齐。
但使用space-around会有一个问题，就是用户在底部栏输入时，上面的Note就看不到了，这样感觉并不好。
为了让Note一直放在屏幕上，将Note改为使用绝对定位position: 'absolute', top: 20，页面使用justifyContent: 'flex-end'让其它View排列在页面底部。
为了让Note一直放在其它View的上面以保证不被覆盖，在写代码时要将它放到其它View的后面，这样后渲染的View就会保持在其它View的前面。
所以经过上面的思考，布局的基本代码如下，全部源码可以到Github上查看
<View>
<View style={styles.board}>
{ grids }
</View>
<View style={styles.note}>
{
selectedGrid && <Note
horizontalNote={selectedGrid.horizontalNote}
verticalNote={selectedGrid.verticalNote}
horizonActive={selectState.horizontal}
/>
}
</View>
<BottomLayout
style={styles.bottomLayout}
handleInput={this._handleInput}
onHintClick={this._onHintClick}
/>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
width: width,
position: 'relative',
justifyContent: 'flex-end',
alignItems: 'center',
},
board: {
width: config.gridWidth * 10,
height: config.gridWidth * 10,
marginBottom: 40,
},
note: {
position: 'absolute',
top: 20,
},
bottomLayout: {
flex: 1,
flexDirection: 'row'
}
});
填坑记
-
如果是引入的其它组件，在部件上使用的style并不会传入组件内部，如上面代码中的BottomLayout的style并不会覆盖组件内部的style，通过react-devtools查看DOM结构就能看出来，引用时定义的style是放在额外的一层wrapper里，组件内的View是被嵌套着的，两者不在同一层，所以style并不会被覆盖
BottomLayout DOM - 绝对定位的组件不能进行动态插入，如上面代码的Note部分，外层有一层View做为占位，即使Note不需要显示，这个View也是占据在那里，只是内部没有任何元素，在界面上完全看不到。
这个可以实验一下，去掉外层的View，将Note部分代码做如下修改，再刷新下界面。刷新后的界面如下图。
可以看到Note还是作为文档流的一部分按照flex-end排列，并没有按照预想的那样固定在顶部。不知道这是否是Bug，或者是我使用方法有误
{
selectedGrid && <Note style={[styles.note]}
horizontalNote={selectedGrid.horizontalNote}
verticalNote={selectedGrid.verticalNote}
horizonActive={selectState.horizontal}
/>
}
绝对定位失效
