阻止Flex项目在React Native中包装

Question

我在使用React Native中的以下flex布局时遇到了什么问题。在每一行中，我希望每个tileContainer占用相等的空间而不是换行到下一行。在这个例子中，我希望所有七个tile都在同一行上。为什么要继续包装？

另外，请注意每个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',
  }
})

Answer 1

对于第二个问题，如果你将View1放在一个带有flexDirection: row的View2中，View 1只会使用flex属性获得它的宽度，所以你必须定义它＆ ＃39;的高度，所以在你想要的情况下，tileContainer应该有：height: '100%',