РН: Выровняйте элементы в ряд как слева, так и справа

Question

Здесь компонент RN (0.59), использующий sectionList для отображения имени события в строке.renderItem отображает 3 элемента подряд, начиная с изображения головы (левое изображение), затем имени события и заканчивая другим изображением головы (правое изображение).

render() {
       return (
        <View  style={styles.container}>
          <SectionList
              sections={this.state.activeEvents} 
              renderItem={({item, section}) => {return (
                                                <View style={styles.container}>
                                                  <Image style={styles.image} source={{uri: item.image}}/>
                                                  <TouchableOpacity onPress={() => {this._onPress(item.id)}} >
                                                    <Text style={styles.item} key={item.id}>{item.name}</Text>
                                                  </TouchableOpacity>
                                                  <View style={styles.containerRight}>
                                                    <Image style={styles.image} source={{uri: "https://bootdey.com/img/Content/avatar/avatar1.png"}}/>
                                                  </View>
                                                </View>)}}

              renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
              keyExtractor={(item, index) => item + index}
            />
        </View>
      ); 

      }

}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      paddingTop: 22,
      paddingVertical: 12,
      flexDirection: 'row',
      alignItems: 'flex-start',
      flexDirection: 'row',
      alignItems: 'flex-start'
    },
    containerRight: {
      flex: 1,
      paddingTop: 22,
      paddingVertical: 12,
      flexDirection: 'row',
      alignItems: 'flex-end',
      flexDirection: 'row',
      alignItems: 'flex-end' 
    },
    sectionHeader1: {
      paddingTop: 2,
      paddingLeft: 10,
      paddingRight: 10,
      paddingBottom: 2,
      fontSize: 14,
      fontWeight: 'bold',
      backgroundColor: 'rgba(247,247,247,1.0)',
    },
    sectionHeader:{
      backgroundColor : '#64B5F6',
      fontSize : 20,
      padding: 5,
      color: '#fff',
      fontWeight: 'bold'
   },
    item: {
      padding: 10,
      fontSize: 18,
      height: 44,
    },
    image:{
      width:45,
      height:45,
      borderRadius:20,
      marginLeft:20
    },
    imageRight:{
      width:45,
      height:45,
      borderRadius:20,
      marginRight:20
    },
  }) 

Вот результат вышеприведенного рендера:

Все элементы строки (изображение слева, название события, справаизображение) должно быть выровнено по вертикали.Левое изображение и имя события правильно выровнены по левой стороне строки, но правое изображение должно быть выровнено по горизонтали по правой стороне строки.Как я могу изменить свой jsx и стиль для достижения этого интерфейса?

Answer 1

Полагаю, вам нужно что-то вроде этого:

Это можно сделать, добавив большой контейнер для строки и добавив:

justifyContent: 'space-between'

Оберните исходный код и исправьте его в соответствии с вашими потребностями или посмотрите на рабочий стол: snack.expo.io/@abranhe/stackoverflow-56638124

import React, { Component } from 'react';
import {
  SectionList,
  Text,
  Image,
  View,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';

const events = [
  {
    title: '2019-04-03',
    data: [
      {
        name: 'Event 1',
        imageLeft: {
          uri: 'https://bootdey.com/img/Content/avatar/avatar1.png',
        },
        imageRight: {
          uri: 'https://bootdey.com/img/Content/avatar/avatar2.png',
        },
      },
      {
        name: 'Event 2',
        imageLeft: {
          uri: 'https://bootdey.com/img/Content/avatar/avatar3.png',
        },
        imageRight: {
          uri: 'https://bootdey.com/img/Content/avatar/avatar4.png',
        },
      },
    ],
  },
  {
    title: '2019-04-07',
    data: [
      {
        name: 'Event 2',
        imageLeft: {
          uri: 'https://bootdey.com/img/Content/avatar/avatar5.png',
        },
        imageRight: {
          uri: 'https://bootdey.com/img/Content/avatar/avatar6.png',
        },
      },
    ],
  },
];

export default class App extends Component {
  onPressEvent = id => {
    alert(eventName);
  };

  render() {
    return (
      <SectionList
        style={styles.selectionList}
        sections={events}
        renderItem={({ item: event, section }) => {
          return (
            <View style={styles.container}>
              <View style={styles.content}>
                <Image style={styles.image} source={event.imageLeft} />
                <TouchableOpacity onPress={() => this.onPressEvent(event.name)}>
                  <Text>{event.name}</Text>
                </TouchableOpacity>
                <Image style={styles.image} source={event.imageRight} />
              </View>
            </View>
          );
        }}
        renderSectionHeader={({ section }) => (
          <Text style={styles.sectionHeader}>{section.title}</Text>
        )}
        keyExtractor={(item, index) => item + index}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 22,
  },
  content: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  selectionList: {
    marginTop: 22,
  },
  sectionHeader: {
    backgroundColor: '#64B5F6',
    fontSize: 20,
    padding: 5,
    color: '#fff',
    fontWeight: 'bold',
  },
  image: {
    width: 45,
    height: 45,
    borderRadius: 20,
    margin: 20,
  },
});

Если у вас есть какие-либо вопросы, дайте мне знать!

Обновление после комментария автора вопроса

Это выглядит близко.Но я не смог провести ни одного теста с момента публикации из-за ошибки, связанной с AndroidX.Можете ли вы переместить event.name влево справа после левого изображения?Для значка справа его можно изменить на меню гамбургера

Было бы просто обернуть левый значок в

<View>
  <Image/>
  <Text>Some Text</Text>
</View>

, тогда это выглядело бы так:

См. Обновленный перекус: snack.expo.io/@abranhe/stackoverflow-56638124-updated

<View style={styles.leftIcon}>
  <Image style={styles.image} source={event.imageLeft} />
  <TouchableOpacity onPress={() => this.onPressEvent(event.name)}>
    <Text>{event.name}</Text>
  </TouchableOpacity>
</View>

А затем добавьте следующий стиль:

leftIcon: {
  flexDirection: 'row',
  justifyContent: 'center',
  alignItems: 'center',
}