如何爲LIstView中的每一行添加一個按鈕？

Question

我有字符串的2D陣列，我使用其顯示在屏幕上的以下程序：

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()函數中設置我的按鈕。任何幫助？

感謝

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