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

【问题标题】：How to add a button for each row in a LIstView?如何为 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() 函数中设置我的按钮。有什么帮助吗？

谢谢

【问题讨论】：

标签： javascript html css reactjs react-native

【解决方案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>
     );
   }

【讨论】：