React Native flex布局问题

Question

我在根据教材敲代码的时候，按照自己的理解去敲了一次，有按照书本代码敲了一次，效果都不是我想要的，我研究了1小时代码，没有发现任何问题啊？ 这是RN的bug吗？

我的效果是这样的：

代码如下：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  PixelRatio
} from 'react-native';

class learnrn extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={[styles.item, styles.center]}>
          <Text style={[styles.font]}>
            酒店
          </Text>
        </View>
        <View style={[styles.item, styles.center, styles.lineLeftRight]}>
          <View style={[styles.center, styles.flex, styles.lineCenter, styles.topView]}>
            <Text style={[styles.font]}>
              海外酒店
            </Text>
          </View>
          <View style={[styles.center, styles.flex, styles.bottomView]}>
            <Text style={[styles.font]}>
              特惠酒店
            </Text>
          </View>
        </View>
        <View style={[styles.item, styles.center]}>
          <View style={[styles.center, styles.flex, styles.lineCenter]}>
            <Text style={[styles.font]}>
              团购
            </Text>
          </View>
          <View style={[styles.center, styles.flex]}>
            <Text style={[styles.font]}>
              客栈公寓
            </Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container : {
    marginLeft: 5,
    marginRight: 5,
    marginTop: 25,
    flexDirection : 'row',
    height: 82,
    borderRadius: 5,
    backgroundColor: '#3FC8AA'
  },
  item : {
    flex : 1,
    flexDirection: 'column',
    height: 80,
  },
  center: {
    alignItems: 'center',
    justifyContent: 'center'
  },
  flex: {
    flex: 1
  },
  lineLeftRight: {
    borderLeftWidth: 1/PixelRatio.get(),
    borderRightWidth: 1/PixelRatio.get(),
    borderColor: '#ffffff'
  },
  lineCenter: {
    borderBottomWidth: 1/PixelRatio.get(),
    borderColor: '#ffffff'
  },
  font: {
    color: '#ffffff',
    fontSize: 16,
    fontWeight: 'bold'
  }
});

AppRegistry.registerComponent('learnrn', () => learnrn);

我flex布局代码应该没写错吧！？我看了好久，硬是没弄明白到底怎么回事造成的这种效果。求解~ 初学者，对很多东西都不是很理解~

Answer 1

把 alignItems: 'center'注释一下你就明白了，然后做相关处理

Answer 2

把那个view设置一个1/3的宽度。