javascript - How to add a floating Action Button inside a scrollview at a specific position in React-Native Expo?

Question

I want to show a floating action button at bottom right side of my screen. But as I have one Scrollview component in my Screen I am not getting how should I do that? In the below image you can see-

there are some cards in the ScrollView but I want to show a floating action button at bottom right side of the screen which will overlap the Cards. So, it would be very nice if anyone suggest me with code - How can I do that?

标签： javascriptreact-native

Answer 1

在 ScrollView 代码下方添加操作按钮并使其成为绝对值。这是一个工作示例代码

import React, { Component } from 'react';

import { StyleSheet, View, Alert, ListView, Text, TouchableOpacity, Image,ScrollView } from 'react-native';

export default class Mynewproject extends Component {


 SampleFunction=()=>{

  // Write your own code here, Which you want to execute on Floating Button Click Event.
  Alert.alert("Floating Button Clicked");

}

render() {

return (

<View style={styles.MainContainer}>

       <ScrollView>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>

       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>

       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>

       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>

       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>

       <Text>sdds</Text>

       </ScrollView>

        <TouchableOpacity activeOpacity={0.5} onPress={this.SampleFunction} style={styles.TouchableOpacityStyle} >

          <Image source={{uri : 'https://reactnativecode.com/wp-content/uploads/2017/11/Floating_Button.png'}} 

          style={styles.FloatingButtonStyle} />

        </TouchableOpacity>

</View>

   );
 }
}

const styles = StyleSheet.create({

 MainContainer :{

   justifyContent: 'center',
   flex:1,
   margin: 10
 },



 TouchableOpacityStyle:{

     position: 'absolute',
     width: 50,
     height: 50,
     alignItems: 'center',
     justifyContent: 'center',
     right: 30,
     bottom: 30,
   },

   FloatingButtonStyle: {

     resizeMode: 'contain',
     width: 50,
     height: 50,
   }
});