Ruchomy przycisk akcji reaguje natywnie

Question

Chcę użyć pływającego przycisku akcji reagowania natywnego Androida w prawym dolnym rogu ekranu. Ale nie jestem w stanie tego zrobić.

Komponent CreateButton CreateButton zawiera pływający kod przycisku. Zadzwoniłem do komponentu CreateButton po widoku listy i chcę pokazać ten przycisk na komponencie Android ListView z przezroczystą nakładką i stałą pozycją w prawym dolnym rogu.

<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

Dostosuj przycisk z dołu, z lewej, prawej, górnej i zapewnić absolutną pozycję przycisku.

To jest mój kod, który używany do wykonanego przycisku pływającego

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

Answer 2

Kilka rzeczy można spróbować 1.borderWidth = 0px 2. zadana min poziomie API do 21.

Answer 3

Sprawdź ten składnik, myślę, że robi dokładnie to, czego szukasz: https://github.com/mastermoo/react-native-action-button

Answer 4

nie trzeba tworzyć waszymi można po prostu użyć React Native Action Button łatwo zintegrować z projektem.

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> 

zainstalować pakiety ikoną: https://github.com/oblador/react-native-vector-icons

npm instalują reagować-native Wektor ikony --save

reagować-rodzimy związek