我如何在一个ListView项目的末尾添加一个按钮

How do I add a button to the end of items in a ListView in ReactNative?

本文关键字：一个 添加 按钮 项目 ListView      更新时间：2023-09-26

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

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

查看图片!

你可以使用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>
)
}

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>
        );
    }
  }
相关文章：