react native 上的浮动操作按钮答案

【问题标题】：floating action button on react nativereact native 上的浮动操作按钮
【发布时间】：2016-01-13 03:03:33
【问题描述】：

我想在屏幕右下角的 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>

【问题讨论】：

我已将位置设置为中心。它不显示文本。

标签： react-native floating-action-button

【解决方案1】：

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

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

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

【讨论】：

首先尝试使用 zIndex，但 position: absolute 做了一个技巧来在需要的地方显示它。只需重新排序代码，以便 FAB 将在所有其他元素之后，如果它仍然被其他东西覆盖
不起作用，绝对位置在 Android 中不起作用。

【解决方案2】：

  <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

反应原生链接

【讨论】：

如果您不想使用反应原生矢量图标，可以在可触摸不透明度内使用 +
为什么borderRadius这么大？
做圆圈。

【解决方案3】：

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

【讨论】：

项目未维护

【解决方案4】：

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

【讨论】：

无论如何添加另一个固有脆弱的第三方依赖来节省 15 行代码！
@TonyAdams 刻薄并没有在这里增加价值，我明白你的意思，但这不是怎么说的，这是一个两年前的答案，而且图书馆没有问题，这是什么我使用并拥有比 15 行实现更多的功能。

【解决方案5】：

您可以尝试几件事 1.borderWidth=0px 2. 设置最低api级别为21。

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

以下是至今（2019 年 12 月）仍在维护的更多存储库：

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

【讨论】：