Question

我正在使用本机扁平化列表，设计了移动屏幕。我想在列表的右下角重叠一个简单的按钮（例如“加号”按钮）。该按钮将在列表中添加或删除项目。给定一个平面列表，我该如何重叠一个按钮？

渲染代码段：

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

预期的行为：

Answer 1

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

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

Answer 2

您可以为此使用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 个答案: