React Native中如何为每个列表项添加并列显示的按钮？

没问题！要给每个列表项添加可并列显示的按钮，你只需要把当前的<Text>和按钮组件放在一个横向布局的容器里就行。通过flexDirection: 'row'就能实现并排效果，具体修改方案如下：

修改后的完整代码 #

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

class YourComponent extends Component {
  // 假设你已经定义了state.ListData和按钮点击处理函数
  handleButtonPress = (item) => {
    console.log(`点击了${item.item_name}的按钮`);
    // 这里可以添加按钮的具体逻辑，比如跳转、删除项等
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.Blue}>My List</Text>
        <FlatList
          data={this.state.ListData}
          renderItem={({ item }) => (
            // 用横向View包裹文本和按钮，实现并列布局
            <View style={styles.listItemContainer}>
              <Text style={styles.myText}>{item.item_name}</Text>
              {/* 这里用TouchableOpacity实现自定义样式的按钮，也可以用原生Button组件 */}
              <TouchableOpacity 
                style={styles.itemButton} 
                onPress={() => this.handleButtonPress(item)}
              >
                <Text style={styles.buttonText}>操作</Text>
              </TouchableOpacity>
            </View>
          )}
          keyExtractor={({ id }, index) => id}
        />
      </View>
    );
  }
}

// 对应的样式配置
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 15,
  },
  Blue: {
    color: 'blue',
    fontSize: 20,
    marginBottom: 15,
  },
  listItemContainer: {
    flexDirection: 'row', // 核心：设置横向布局
    alignItems: 'center', // 让文本和按钮垂直居中对齐
    justifyContent: 'space-between', // 文本靠左，按钮靠右
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  myText: {
    flex: 1, // 让文本占据列表项的剩余宽度，按钮保持固定尺寸
    fontSize: 16,
  },
  itemButton: {
    backgroundColor: '#007AFF',
    paddingHorizontal: 18,
    paddingVertical: 6,
    borderRadius: 4,
  },
  buttonText: {
    color: 'white',
    fontSize: 14,
  },
});

export default YourComponent;

关键实现要点 #

• 横向布局容器：给每个列表项套一个View，并设置flexDirection: 'row'，让内部的文本和按钮横向排列。
• 垂直居中对齐：用alignItems: 'center'保证文本和按钮在垂直方向上对齐，避免布局错位。
• 空间分配：给文本设置flex: 1，让它自动填充列表项的剩余空间，按钮则保持固定的宽高，这样布局更规整。
• 按钮选择：如果不需要自定义样式，也可以直接用React Native的Button组件替换TouchableOpacity，但后者的样式灵活性更高。

内容的提问来源于stack exchange，提问作者user12502105