用React Native做一个填字游戏（1）——基本页面

游戏的界面如下

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

绝对定位失效

用React Native做一个填字游戏（1）——基本页面

填坑记

推荐阅读更多精彩内容