如何为 LIstView 中的每一行添加一个按钮？

Posted 2023-03-05

【中文标题】如何为 LIstView 中的每一行添加一个按钮？

【英文标题】：How to add a button for each row in a LIstView?

【发布时间】：2017-09-29 04:30:09

【问题描述】：

我有一个二维字符串数组，我使用以下例程将其显示在屏幕上：

class MyComponent extends Component 
    props:  strings: Array<Object>, onPress: Function ;
    render()  
               return (
                    <View>
                        this.props.strings.map( (string) =>  return (<Text>string</Text>);  ) 
                    </View>);
              
 

render()   
        // ..
        let DataSource =  ds.cloneWithRows(My2dArray);
        return (    
                <View>
                    <ListView 
                        dataSource=DataSource
                        renderRow=this.renderRow.bind(this)
                    />
                </View>
                ); // return
     // render

renderRow(row: Object) 
        return (
            <MyComponent SingleRow = row />
        ); // return
 // rendeRow

输出：

我希望每一行都有一个按钮，如下所示：

但我不确定如何在renderRow() 函数中设置我的按钮。有什么帮助吗？

谢谢

【参考方案1】：

您可以使用View 包装任何内容并将行拆分为块。我的意思是带有字符串的左块和带有按钮的右块，像这样

class MyComponent extends Component 
  render()  
    return (
      <View styles=display: "flex", flexDirection: "row">
           <View styles=flex: 1, display: "flex", flexDirection: "column">
             
                 this.props.strings.map( (string) =>  return (<Text>string</Text>);  ) 
             
          </View>
          <View>
             <Button title="+" />
          </View>
       </View>
     );