javascript - 如何在 React-Native Expo 中特定位置的 ScrollView 内添加 float 操作按钮？

Question

我想在屏幕右下方显示一个 float 操作按钮。但是由于我的屏幕中有一个 Scrollview 组件，所以我不知道该怎么做？
在下图中，您可以看到-

ScrollView 中有一些卡片，但我想在屏幕右下方显示一个 float 操作按钮，该按钮将与卡片重叠。所以，如果有人建议我提供代码，那就太好了 - 我该怎么做？

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,
   }
});