2015-10-14 24 views
12

Voglio utilizzare un pulsante di azione mobile in risposta Android nativo nell'angolo in basso a destra dello schermo. Ma non sono in grado di farlo.pulsante di azione fluttuante per la risposta nativa

Il componente CreateButton contiene codice di pulsante mobile. Ho chiamato il componente CreateButton dopo l'elenco View e voglio mostrare questo pulsante sul componente Android ListView con overlay trasparente e posizione fissa in basso a destra.

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> 

risposta

16

Regolare il pulsante con la parte inferiore, sinistra, destra, superiore e fornire la posizione assoluta al pulsante.

Questo è il mio codice che utilizzate per pulsante galleggiante fatta

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

provato con zIndex prima, ma ' position: absolute' ha fatto un trucco per visualizzarlo dove necessario. Basta riordinare il codice in modo che FAB sia dopo tutti gli altri elementi se è ancora coperto da qualcos'altro –

0

paio di cose che si possono provare 1.borderWidth = 0px 2. Impostare min livello di API a 21.

2

Non c'è bisogno di creare la vostra voi può semplicemente usare React Native Action Button è facile da integrare nel tuo progetto.

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

Installare pacchetti di icone: https://github.com/oblador/react-native-vector-icons

NPM installare reagiscono-nativo-vector-icons --save

reagire nativo collegamento

Problemi correlati