react-native flatlist上的热门重叠按钮？答案

【问题标题】：Hot to overlap button on react-native flatlist?react-native flatlist上的热门重叠按钮？
【发布时间】：2019-11-28 00:45:20
【问题描述】：

我正在使用 react-native flatlist 来设计移动屏幕。我想在右下角的列表上重叠一个简单的按钮（如“加号”按钮）。该按钮将从列表中添加或删除项目。给定一个平面列表，我怎样才能重叠一个按钮？

渲染 sn-p 代码：

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

预期行为：

【问题讨论】：

标签： javascript node.js reactjs react-native

【解决方案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',
  },
});

【讨论】：

【解决方案2】：

我发现解决方案只是在一般视图中添加一个组件并固定其绝对位置。例如：

render() {return (
            <View style={styles.feed_list}>

                <FlatList
                    refreshControl={ <RefreshControl refreshing={this.state.refreshing} onRefresh={this._onRefresh} />}
                    data={this.state.data}
                    keyExtractor={this._keyExtractor}
                    renderItem={({item}) => {

                        ...     })            
                />
            <TouchableOpacity
                style={{
                    borderWidth:1,
                    borderColor:'rgba(0,0,0,0.2)',
                    alignItems:'center',
                    justifyContent:'center',
                    width:70,
                    position: 'absolute',                                          
                    bottom: 10,                                                    
                    right: 10,
                    height:70,
                    backgroundColor:'#fff',
                    borderRadius:100,
                }}
                >
                <Icon name="plus"  size={30} color="#01a699" />
            </TouchableOpacity>
            </View>
        );
}

【讨论】：