防止Flex項目在React Native中環繞

我在理解React Native中下面的flex佈局時會發生什麼問題。在每一行中，我希望每個tileContainer佔用相同的空間，而不是換行到下一行。在這個例子中，我希望所有七個拼貼在同一行上。爲什麼它一直在包裝？防止Flex項目在React Native中環繞

此外，請注意每個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', 
    } 
})

來源

2017-10-05 Max Millington

對第二個問題，如果你把一個視圖1一個視圖2內側flexDirection: row，查看1只是要得到它的寬度與柔性屬性，所以你必須定義它的高度，所以在你需要的情況下，瓷磚容器應該有：height: '100%',

來源

2017-10-05 16:52:53

防止Flex項目在React Native中環繞

回答

相關問題