如何在React-Native Expo的特定位置的滚动视图内添加浮动Action Button？

Question

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

ScrollView中有一些卡，但是我想在屏幕的右下方显示一个浮动操作按钮，该按钮将与卡重叠。因此，如果有人向我建议使用代码，那就太好了-我该怎么做？

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

Answer 2

视图应位于ScrollView之外，样式属性中的位置应为fixed。底部和右侧属性显示视图和屏幕末端之间的空间

<ScrollView>
...
</ScrollView>
<View style={{ position: 'fixed', bottom: 10, right: 10, zIndex: 200 }}>
    <Icon name="plus" size={25} color="#8E8E93" />
</View>