react-native - RN : Align items in a row both left and right

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 和样式以实现此 UI？

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,
  },
});

如果您有任何问题，请告诉我!

问题作者发表评论后更新

It looks close. But I was not able to do any test since my post because of an error related to AndroidX. Can you move the event.name to the left right after the left image? For the icon on the right, it may be changed to a hamburger menu

只需将左侧图标包装成一个

就很容易了

<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',
}