Question

我想在屏幕右下角的native native android中使用浮动操作按钮。但我无法这样做。

CreateButton 组件包含浮动按钮代码。我在List View之后调用了CreateButton组件，我想在ListView android组件上显示这个按钮，透明覆盖和右下角的固定位置。

<DrawerLayoutAndroid
     drawerWidth={300}
     drawerPosition={DrawerLayoutAndroid.positions.Left}
     renderNavigationView={() => navigationView}>
     <View style={styles.navBar}>
       <TouchableOpacity style={styles.menuIconButton}>
         <Image style={styles.menuIcon} source={{uri : 'https://cdn1.iconfinder.com/data/icons/basic-ui-elements-plain/422/                 06_menu_stack-128.png'}}/>
       </TouchableOpacity>
       <Text style={styles.appName}>LifeMaker</Text>
       <TouchableOpacity style={styles.smokeIconButton}>
         <Image style={styles.smokeIcon} source={{uri : 'http://avtech.com/images/home/icons/Icon_Smoke_&_Fire.png'}}/>
       </TouchableOpacity>
     </View> 
     <ToolbarAndroid                                            
         title="AwesomeApp"                                     
         onActionSelected={this.onActionSelected}/>
    <ListView
      dataSource={this.state.dataSource}                       
      renderRow={this._renderSmokeSignals}/>      
    <CreateButton/> //this is floating button component call
</DrawerLayoutAndroid> 
    //this is floating button component (<CreateButton>)
    <View style={styles.createButton}>
      <AccentColoredFab>                                       
        <Icon                              
          name='ion|plus'
          size={25}      
          color='#000000'                                      
          style={styles.icon}
        />                                                     
      </AccentColoredFab>                  
     </View>

Answer 1

使用底部，左侧，右侧，顶部调整按钮，并为按钮提供绝对位置。

这是我用来制作浮动按钮的代码

width: 60,  
height: 60,   
borderRadius: 30,            
backgroundColor: '#ee6e73',                                    
position: 'absolute',                                          
bottom: 10,                                                    
right: 10,

Answer 2

查看此组件，我认为它完全符合您的需求： https://github.com/mastermoo/react-native-action-button

Answer 3

(define (diagonal M)
  (if (null? M)
      '()
      (cons (caar M)
            (diagonal (map cdr (cdr M))))))

安装图标包：https://github.com/oblador/react-native-vector-icons

npm install react-native-vector-icons --save

react-native link

Answer 4

无需创建自己，只需使用React Native Action Button即可轻松集成到项目中。

Answer 5

你可以尝试一些事情 1.borderWidth = 0像素 2.将min api级别设置为21。

Answer 6

我遇到了同样的问题，我尝试了Pankaj Thakur解决方案，但是它并没有为我解决（FAB仍然相对于scrollList）。所以我使用Top属性为我解决了这个问题。

Answer 7

这里还有更多的回购协议，直到现在（2019年12月）：

https://github.com/santomegonzalo/react-native-floating-action
https://github.com/WrathChaos/react-native-floating-action-button

反复原生的浮动动作按钮

7 个答案: