如何使用 Flexbox 显示少数元素右对齐和左对齐

Question

我是原生反应的新手。我对 FlexBox 有所了解，据我了解，我们只能显示左/右/居中对齐的元素。但是，我想显示如下

______________________________
  Header       Header  Header
______________________________
Image Text     value1  Value2
______________________________
Image Text     value1  Value2
______________________________
Image Text     value1  Value2
______________________________
Image Text     value1  Value2
______________________________

如何在不使用另一个 flexbox 的情况下在 Flatlist 中显示上述布局，我有一个想法，使用两个 flexbox，我们可以实现这一点。但是，我只想使用单个 flexbox。有什么建议吗？

Answer 1

   <View style={{ flex: 1 }}>

    /* this is for the header of the table */

    <View style={{ flex: 1, flexDirection: 'row' }}>
     <View style={{ flex: 2 }}>
        <Text style={{ textAlign: 'center'}>Header</Text>
     </View>
     <View style={{ flex: 1 }}>
        <Text style={{ textAlign: 'center'}>Header</Text>
     </View>
     <View style={{ flex: 1 }}>
        <Text style={{ textAlign: 'center'}>Header</Text>
     </View>
    </View>

    /* this is for the data row of the table */

    <View style={{ flex: 1, flexDirection: 'row' }}>
       <View style={{ flex: 2, flexDirection: 'row' }}>
          <Image style={{ flex: 1 }}></Image> 
          <Text style={{ flex: 1 }}>Text</Text>
       </View>
       <View style={{ flex: 1 }}>
          <Text>Value 1</Text>
       </View>
       <View style={{ flex: 1 }}>
          <Text>Value 2</Text>
       </View>
      </View>
    </View>

您可以使用 flex 来使用这样的网格。如果需要，您可以在使用 map 函数轻松地将行项目添加到表时循环。

如果您需要使用平面列表，您可以使用标题组件(ListHeaderComponent) 来呈现标题行和用户renderItem 函数来呈现单行。 在你的组件上使用类似下面的东西。

   renderHeader() {
     return (
        <View style={{ flex: 1, flexDirection: 'row' }}>
         <View style={{ flex: 2 }}>
            <Text style={{ textAlign: 'center'}>Header</Text>
         </View>
         <View style={{ flex: 1 }}>
            <Text style={{ textAlign: 'center'}>Header</Text>
         </View>
         <View style={{ flex: 1 }}>
            <Text style={{ textAlign: 'center'}>Header</Text>
         </View>
        </View>
     )
    }

    renderItem({ item }) {
        <View style={{ flex: 1, flexDirection: 'row' }}>
           <View style={{ flex: 2, flexDirection: 'row' }}>
              <Image style={{ flex: 1 }}>item.image</Image> 
              <Text style={{ flex: 1 }}>item.text</Text>
           </View>
           <View style={{ flex: 1 }}>
              <Text>item.value_1</Text>
           </View>
           <View style={{ flex: 1 }}>
              <Text>item.value_2</Text>
           </View>
        </View>
    }

    render() {
       return (
         <FlatList
           data={[ { text: 'Text', value_1: 'Value 1', value_2: 'Value 2'} ]}
           renderItem={this.renderItem}
           ListHeaderComponent={this.renderHeader}
           contentContainerStyle={{ flex: 1 }}
         />
       );
    }