如何在 ReactNative 的 ListView 中的项目末尾添加一个按钮？答案

【问题标题】：How do I add a button to the end of items in a ListView in ReactNative?如何在 ReactNative 的 ListView 中的项目末尾添加一个按钮？
【发布时间】：2016-09-28 14:41:53
【问题描述】：

这是我尝试过的，但“显示未链接的标签”出现在底部，而不是在最后一项之后。

render() {

return (
  <View style={styles.container}>
    <Text style={styles.title}> Settings Children </Text>
      <ListView
      dataSource={this.state.dataSource}
      renderRow={(rowData)=> <Text>{rowData}</Text>}
      />
      <View style={styles.button}>
        <Text style={styles.buttonText}>Show unlinked tags</Text>
      </View>

  </View>

)
}

View image!

【问题讨论】：

标签： javascript reactjs mobile react-native

【解决方案1】：

您可以使用 renderFooter 在列表之后渲染视图。

renderFooter = () => {
  return (
    <View style={styles.button}>
      <Text style={styles.buttonText}>Show unlinked tags</Text>
    </View>
  )
}
render() {

return (
  <View style={styles.container}>
    <Text style={styles.title}> Settings Children </Text>
    <ListView
      dataSource={this.state.dataSource}
      renderRow={(rowData)=> <Text>{rowData}</Text>}
      renderFooter={this.renderFooter}
    />
  </View>
)
}

【讨论】：

拯救了我的一天，伙计

【解决方案2】：

TLDR： React Native 不提供按钮组件，使用这个https://github.com/ide/react-native-button

完整：

npm install react-native-button --save

然后将其用作

  import React, { Component } from 'react';
  import Button from 'react-native-button';

  export default class ExampleComponent extends Component {
    constructor(props, context) {
      super(props, context);
    // ...
    }
    _handlePress() {
      console.log('Pressed!');
    }
    render() {
      return (
        <View>
          <View>
            <ListView
                      dataSource={ this.state.dataSource }
                      renderRow={ (rowData) => <Text>
                                                 { rowData }
                                               </Text> } />
          </View>
          <View>
            <Button
                    style={ { fontSize: 20, color: 'green' } }
                    styleDisabled={ { color: 'red' } }
                    onPress={ () => this._handlePress() }>
              Press Me!
            </Button>
          </View>
        </View>
        );
    }
  }

【讨论】：

我知道，但是按钮“按我！”仍在页面底部，我希望 Button、Title 或任何其他组件位于最终项目的正下方。正如你在我的图片中看到的那样，填满了整个屏幕。