防止 Flex 项目包装在 React Native 中答案

【问题标题】：Prevent Flex Items from Wrapping in React Native防止 Flex 项目包装在 React Native 中
【发布时间】：2017-10-05 16:44:58
【问题描述】：

我在理解 React Native 中以下 flex 布局的情况时遇到了一些麻烦。在每一行中，我希望每个 tileContainer 占用相等的空间，而不是换行到下一行。在此示例中，我希望所有七个图块位于同一行。为什么会一直换行？

另外，请注意每个tileContainer 的高度如何不会增长到父级的高度。为什么是这样？我希望我的 tileContainer 与父容器具有相同的高度。我假设这是因为父母有flexDirection: row，因此孩子身上的flex: 1 不会使身高增长，但是我怎样才能让身高增长呢？

const Row = (props) => {
  const renderTiles = () => {
    return props.row.map((tile, index) => {
      return (
        <View key={index} style={styles.tileContainer} >
          <Text style={styles.tile} >
            b
          </Text>
        </View>
      )
    })
  }

  return (
    <View style={styles.row}>
      {renderTiles()}
    </View>
  )
}

Row.propTypes = {
  row: PropTypes.array.isRequired
}

const styles = StyleSheet.create({
  row: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: 'blue',
    flexWrap: 'nowrap'
  },
  tileContainer: {
    flex: 1,
    borderWidth: 0.5,
    borderColor: 'red'
  },
  tile: {
    textAlign: 'center',
  }
})

【问题讨论】：

标签： reactjs mobile react-native flexbox

【解决方案1】：

对于第二个问题，如果您将 View1 放入带有 flexDirection: row 的 View2 中，则 View 1 只会使用 flex 属性获取其宽度，因此您必须定义它的高度，因此在您想要的情况下为 tileContainer应该有：height: '100%',

【讨论】：