Floating Action Button auf reagieren native

Question

Ich möchte eine schwimmende Aktion Schaltfläche in der nativen Android in der unteren rechten Ecke des Bildschirms zu reagieren. Aber ich kann das nicht.

Die CreateButton Komponente enthält Floating-Button-Code. Ich habe die CreateButton-Komponente nach der Liste View aufgerufen und möchte diese Schaltfläche auf der ListView Android-Komponente mit transparentem Overlay und fester Position unten rechts anzeigen.

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

Answer 1

Passen Sie Ihre Taste mit Boden versuchen, Links, Rechts, Oben und geben Sie absolute Position zum Knopf vor.

Das ist mein Code,

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

Answer 2

Paar Dinge, die Sie 1.borderWidth = 0px 2. Set min api Ebene bis 21.

Answer 3

Schauen Sie sich diese Komponente aus Floating-Taste verwendet, ich glaube, es tut genau das, was Sie suchen: https://github.com/mastermoo/react-native-action-button

Answer 4

Keine Notwendigkeit, Ihnen zu erstellenden kann einfach React Native Action Button verwenden, es ist einfach in Ihr Projekt zu integrieren.

Answer 5

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

installieren Icon Packs: https://github.com/oblador/react-native-vector-icons

npm installieren reagieren-native-Vektor-Icons --save

reagieren-native Link