Flex React Native - Cách ngắt nội dung sang dòng tiếp theo với flex khi nội dung đạt đến cạnh

Question

Tôi có danh sách các biểu tượng bên trong vùng chứa được tạo kiểu của tôi được hiển thị trong flexDirection:'row' nhưng khi có nhiều biểu tượng hơn chiều rộng của chế độ xem, chúng không phá vỡ dòng tiếp theo, nhưng tiếp tục ở bên phải ra khỏi xem. Làm thế nào để tôi có được nội dung để phá vỡ dòng tiếp theo nếu nó đạt đến chiều rộng tối đa?

Styling:

var styles = StyleSheet.create({ 
    container: { 
    width: SCREEN_WIDTH, //width of screen 
    flexDirection:'row', 
    backgroundColor: 'transparent', 
    marginTop:40, 
    paddingLeft:10, 
    paddingRight:10, 
    flex: 1, 
    }, 
    iconText:{ 
    paddingLeft:10, 
    paddingRight:10, 
    paddingTop:10, 
    paddingBottom:10 
    }, 
}); 

Render:

<View style={styles.container}> 

     <TouchableHighlight 
     onPress={() => this.changeIcon(indexToChange, icons[0])} 
     underlayColor='#F7F7F7'> 
      <Text style={styles.iconText}><IonIcons name={icons[0]} size={30} color="#555" /></Text> 
     </TouchableHighlight> 

     <TouchableHighlight 
     onPress={() => this.changeIcon(indexToChange, icons[1])} 
     underlayColor='#F7F7F7'> 
      <Text style={styles.iconText}><IonIcons name={icons[1]} size={30} color="#555" /></Text> 
     </TouchableHighlight> 

     <TouchableHighlight 
     onPress={() => this.changeIcon(indexToChange, icons[2])} 
     underlayColor='#F7F7F7'> 
      <Text style={styles.iconText}><IonIcons name={icons[2]} size={30} color="#555" /></Text> 
     </TouchableHighlight> 

     ...//more continued on 

</View> 

Khi các biểu tượng đạt được chiều rộng phía bên phải họ không phá vỡ xuống đáy. Điều này có thể không?

Answer 1

Bạn có thể thêm flexWrap: 'wrap' và alignItems: flex-start (hoặc bất cứ điều gì khác hơn là stretch phong cách container của bạn.

Nếu bạn không chỉ định align-items hoặc nếu bạn thiết lập align-items: stretch, mỗi cột trong hàng đầu tiên sẽ mất càng nhiều chiều cao như có thể, đẩy hàng thứ hai dưới đây giống như trong hình dưới đây: