web-dev-qa-db-fra.com

bouton d'action flottant sur réagir natif

Je souhaite utiliser un bouton d’action flottant dans l’action Android native dans le coin inférieur droit de l’écran. Mais je ne suis pas capable de le faire.

Le composant CreateButton contient un code de bouton flottant. J'ai appelé le composant CreateButton après la vue Liste et je souhaite afficher ce bouton sur le composant ListView Android avec une superposition transparente et une position fixe en bas à droite. 

 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>
react-nativefloating-action-button
14
Pankaj Thakur

Ajustez votre bouton avec bas, gauche, droite, haut et donnez une position absolue au bouton.

Ceci est mon code qui faisait du bouton flottant

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

Découvrez ce composant, je pense qu’il fait exactement ce que vous recherchez: https://github.com/mastermoo/react-native-action-button

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

Installer les packs d'icônes: https://github.com/oblador/react-native-vector-icons

npm installer react-native-vector-icons --save

lien réactif natif

7
Hitesh Sahu

Pas besoin de créer le vôtre, vous pouvez simplement utiliser Bouton d’action React Native Action il est facile à intégrer dans votre projet.

3
Daniel Barde

Quelques choses que vous pouvez essayer 1.borderWidth = 0px 2. Définissez le niveau minimal de l'api sur 21.

0
Ashish Rawat