react-native - React Native上的 float 操作按钮

标签 react-native floating-action-button

我想在屏幕右下角的react native android中使用 float 操作按钮。但是我不能这样做。

CreateButton 组件包含 float 按钮代码。我在列表 View 之后调用了CreateButton组件,我想在具有透明覆盖层和右下角固定位置的ListView android组件上显示此按钮。

enter image description here

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

最佳答案

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

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

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

关于react-native - React Native上的 float 操作按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33135256/

相关文章:

javascript - 无法点击 iOS 模拟器中的文本字段或按钮

ios - 如何在我的设备上而不是在 iPhone 6 模拟器中运行我的 React Native 应用程序?

android - 将 CoordinatorLayout 与 SwipeRefreshLayout 以及 RecyclerView 和 FloatingActionButton 一起使用

java - 如何在垂直 ScrollView 上使用 float 按钮?

android - 如何在 react-native 中更改应用程序的显示名称

android - CoordinatorLayout 和 BottomSheetBehavior 的 react-native 包装器

react native 0.55.2上的Android构建错误

android - Jetpack 撰写 : How to disable FloatingAction Button?

java - 带有 float 按钮的 ScrollView

android - CollapsingToolbarLayout 与 FloatingActionButton 错误