LIstViewの各行にボタンを追加する方法は？

Question

Iは、文字列の2次元配列を有し、そしてIは、以下のルーチンを使用して、画面に表示：

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 

は出力：

Iが行ごとにボタンを持っていると思い、このような何か：

しかし、私はわかりません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> 
    ); 
    }