bouton d'action flottante sur réagir natif
Je veux utiliser un flottant bouton d'action à réagir android natif dans le coin inférieur droit de l'écran. Mais je ne suis pas en mesure de le faire.
La CreateButton composant contient bouton flottant code. J'ai appelé le CreateButton composant après l'Affichage de la liste et je veux montrer ce bouton dans la liste de android composant avec superposition transparente et position fixe en bas à droite.
<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>
source d'informationauteur Pankaj Thakur
Vous devez vous connecter pour publier un commentaire.
Ajuster votre bouton en bas, à Gauche, à Droite, en Haut et en fournir la position absolue de bouton.
C'est mon code qui sert à flotter bouton
Découvrez ce composant, je pense que c'est exactement ce que vous cherchez:
https://github.com/mastermoo/react-native-action-button
Installer Des Packs D'Icônes: https://github.com/oblador/react-native-vector-icons
Pas besoin de créer la vôtre, vous pouvez simplement utiliser Réagir Natif Bouton D'Action c'est facile à intégrer dans votre projet.
Couple de choses que vous pouvez essayer
1.borderWidth=0px
2. Set min api de niveau 21.