Как показать несколько элементов правого и левого выравниваний с помощью Flexbox - PullRequest
Новая
       8

Как показать несколько элементов правого и левого выравниваний с помощью Flexbox

0 голосов
/ 18 февраля 2019

Я новичок, чтобы реагировать на родных.Я имею представление о FlexBox. Как я понял, мы можем показывать элементы либо по левому / правому краю, либо по центру.Но я хочу показать, как показано ниже 

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

Как показать вышеупомянутый макет в Flatlist без использования другого flexbox, у меня есть идея, используя два flexbox, мы можем достичь этого.Но я хочу использовать только один flexbox.Есть предложения?

1 Ответ

0 голосов
/ 18 февраля 2019 
   <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.Если вам нужно, вы можете легко зацикливаться при добавлении элементов строки в таблицу с помощью функции карты.

Если вам нужно использовать плоский список, вы можете использовать компонент заголовка (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 }}
         />
       );
    }
...