代码之家 › 专栏 › 技术社区 › Anilkumar iOS Developer

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

react-native-flatlist flexbox ecmascript-6 react-native reactjs

Anilkumar iOS Developer · 技术社区 · 6 年前

我是新来的反应本地人我知道FlexBox,根据我的理解,我们可以只显示左/右/中心对齐元素但是,我想展示如下

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

如何在平面列表中显示上述布局而不使用另一个flexbox,我有想法,使用两个flexbox,我们可以实现这一点但是,我只想用一个flexbox有什么建议吗?

0 回复 | 直到 6 年前

csath 6 年前

   <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可以使用这样的网格如果需要,可以在使用映射函数向表中添加行项时轻松循环。

如果需要使用平面列表,可以使用header组件(listhedercomponent)来呈现标题行,使用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 }}
         />
       );
    }