javascript - 热衷于在 react native 平面列表上重叠按钮？

Question

我正在使用 react 原生平面列表，设计移动屏幕。我想在右下角的列表上重叠一个简单的按钮(如“加号”按钮)。该按钮将从列表中添加或删除项目。给定一个平面列表，如何重叠按钮？

渲染片段代码:

render(){return (
            <View style={styles.feed_list}>
                
                <FlatList
                    data={this.state.data}
                    keyExtractor={this._keyExtractor}
                    renderItem={({item}) => (
                        <ListItem 
                            ...
                        />
                    )}                    
                />
            </View>
        );
}

预期行为:

Answer 1

您可以使用react-native-action-button库来实现此目的。

查看 here

它易于使用，您不需要应用任何额外的样式来设置按钮

这是示例

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import ActionButton from 'react-native-action-button';
import Icon from 'react-native-vector-icons/Ionicons';


class App extends Component {

  render() {
    return (
      <View style={{flex:1, backgroundColor: '#f3f3f3'}}>
        {/* Rest of the app comes ABOVE the action button component !*/}
        <ActionButton buttonColor="rgba(231,76,60,1)">
          <ActionButton.Item buttonColor='#9b59b6' title="New Task" onPress={() => console.log("notes tapped!")}>
            <Icon name="md-create" style={styles.actionButtonIcon} />
          </ActionButton.Item>
          <ActionButton.Item buttonColor='#3498db' title="Notifications" onPress={() => {}}>
            <Icon name="md-notifications-off" style={styles.actionButtonIcon} />
          </ActionButton.Item>
          <ActionButton.Item buttonColor='#1abc9c' title="All Tasks" onPress={() => {}}>
            <Icon name="md-done-all" style={styles.actionButtonIcon} />
          </ActionButton.Item>
        </ActionButton>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  actionButtonIcon: {
    fontSize: 20,
    height: 22,
    color: 'white',
  },
});