react native上的浮动操作按钮

fgw7neuy  于 2022-12-14  发布在  React
关注(0)|答案(8)|浏览(250)

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

iezvtpos1#

调整您的按钮与底部,左,右,顶部,并提供绝对位置的按钮。
这是我用来制作浮动按钮代码

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

e4yzc0pl2#

<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安装React Native矢量图标--保存
React-本机链接

tjrkku2a

tjrkku2a3#

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

rn0zuynd

rn0zuynd4#

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

mbjcgjjk

mbjcgjjk5#

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

h79rfbju

h79rfbju6#

我有同样的问题,我已经尝试了Pankaj Thakur解决方案,但它没有为我解决它(FAB仍然相对于scrollList).所以我使用顶部属性为我解决了它.

tgabmvqs

tgabmvqs8#

我用的是这个package,效果很好。尽管这个问题有答案,但我认为这个答案会对别人有帮助。

相关问题