我正在使用react native(expo)创建一个应用程序,我需要在滚动视图中显示一个非常高的图像,其中后退按钮始终悬停在顶部。
我的目标是能够垂直滚动以查看后退按钮停留在固定位置的其余图像(被视口剪切)。我在ScrollView中使用了ImageBackground来托管图像和后退按钮。
const styles = StyleSheet.create({
screen: {
flex: 1,
backgroundColor: "transparent"
},
scrollView: {
flex: 1
},
imageBackground: {
flex: 1
},
container: {
flex: 1,
flexDirection: "column",
justifyContent: "space-between",
paddingHorizontal: 16,
paddingVertical: scaleVertical(24),
backgroundColor: "transparent"
},
backButtonView: {
paddingTop: 10,
paddingBottom: 10,
paddingLeft: 0,
paddingRight: 10
},
backButtonIcon: {
height: 470 * 0.085,
width: 470 * 0.085,
resizeMode: "contain"
}
});
export class ImageScreenComponent extends React.Component {
static navigationOptions = {
header: null
};
constructor(props) {
super(props);
}
render() {
return (
<View
behavior="position"
style={styles.screen}
onStartShouldSetResponder={e => true}
onResponderRelease={e => Keyboard.dismiss()}
>
<StatusBar hidden={true} />
<ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollView}>
<ImageBackground
source={this.props.backgroundImage}
resizeMode="center"
style={styles.imageBackground}
>
<View style={styles.container}>
<TouchableOpacity style={styles.backButtonView} onPress={this.props._goBackFunc}>
<Image style={styles.backButtonIcon} source={backIcon} />
</TouchableOpacity>
</View>
</ImageBackground>
</ScrollView>
</View>
);
}
}
使用上述实现,即使图像以全屏显示,我也无法根据需要滚动图像。在这方面的任何帮助都将不胜感激!