LIstView에서 각 행에 버튼을 추가하는 방법은 무엇입니까?

Question

내가 문자열의 2 차원 배열을 가지고, 내가 사용하여 화면에 표시 루틴 다음

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