![](/img/trans.png)
[英]KeyboardAvoidingView with ScrollView are Not working in react-native or expo
[英]How to add a floating Action Button inside a scrollview at a specific position in React-Native Expo?
在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,
}
});
View应该在ScrollView
之外,并且样式属性中的位置应该是fixed
。 底部和右侧属性显示视图和屏幕末端之间的空间
<ScrollView>
...
</ScrollView>
<View style={{ position: 'fixed', bottom: 10, right: 10, zIndex: 200 }}>
<Icon name="plus" size={25} color="#8E8E93" />
</View>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.