React Native 上的浮动操作按钮

37

我想在React Native Android应用程序中使用一个浮动操作按钮,放在屏幕右下角。但是我无法做到这一点。

CreateButton组件包含浮动按钮代码。我在列表视图之后调用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>

我已将位置设置为中心。它没有显示文本。 - sejn
8个回答

62

调整您的按钮,包括底部、左侧、右侧和顶部,并为按钮提供绝对位置。

这是用于制作浮动按钮的代码。

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

1
首先尝试使用zIndex,但是position: absolute的技巧可以将其显示在需要的位置。只需重新排列代码,以便FAB在所有其他元素之后,如果它仍然被其他东西覆盖。 - Lukas Liesis
2
不起作用,Android 中的绝对定位不起作用。 - Ezos

52
  <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>

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

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

react-native link


如果您不想使用React Native矢量图标,可以在Touchable Opacity中使用<Text style={{fontSize: 48}}>+</Text>。 - vinay gosain
为什么要这么大的 borderRadius - MNG MAN
制作圆形。 - Hitesh Sahu

9

3
该项目未得到维护。 - chenop

3
不需要自己创建,您可以直接使用React Native Action Button,它很容易集成到您的项目中。 React Native Action Button

6
非常愿意为了节省15行代码而添加另一个本质上脆弱的第三方依赖! - Tony Adams
7
@TonyAdams的言辞有些刻薄,这并没有为此增添价值。我理解你的观点,但表述方式不太恰当。这是一个两年前的回答,而且那个库没有问题,我用过它,并且比一个15行的实现要功能更加齐全。 - Daniel Barde

0

你可以尝试以下几件事情: 1. borderWidth=0px 2. 将最小API级别设置为21。


0

我遇到了同样的问题,尝试了Pankaj Thakur的解决方案,但对我没有用(FAB仍然相对于滚动列表)。所以我使用Top属性解决了这个问题。



0

我使用了这个,它运行良好。虽然这个问题已经有了答案,但我认为这个答案会帮助其他人。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接