反應本機上的浮動動作按鈕

我想在屏幕右下角的反應本機android中使用浮動動作按鈕。但我無法這樣做。反應本機上的浮動動作按鈕

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

來源

2015-10-14 Pankaj Thakur

與底部調整您的按鈕，左，右，上，爲按鈕提供絕對位置。

這是我的代碼，用來製作浮動按鈕

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

來源

2015-10-22 10:13:10

試圖用zIndex的第一，但'位置：絕對'做了一個技巧，以顯示它在需要的地方。只需對代碼重新排序，以便FAB在所有其他元素之後仍然覆蓋其他元素 –

夫婦的事情，你可以嘗試 1.borderWidth = 0像素 2.設置最低API級別到21

來源

2015-10-16 16:06:18

退房這個組件，我認爲它確實你在尋找什麼： https://github.com/mastermoo/react-native-action-button

來源

2015-10-22 18:47:47 pearl

無需創建你的你只需使用React Native Action Button就可以輕鬆集成到您的項目中。

來源

2017-02-20 08:49:48

<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安裝的反應，本機矢量圖標--save

反應本地鏈路

來源

2018-03-06 23:58:29

反應本機上的浮動動作按鈕

回答

相關問題