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

Question

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

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 包装任何内容并将行拆分为 block 。我的意思是左边的 block 有字符串，右边的 block 有你的按钮，就像这样

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