在本地本機列表上是否有重疊按鈕？

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庫。

在這里查看

它易於使用，您無需為設置按鈕應用任何其他樣式

這是例子

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