图像固定在 React 原生的 ScrollView 中

Image fixed inside the ScrollView with React native

本文关键字：ScrollView 原生 React 图像      更新时间：2023-09-26

我想在滚动视图组件内的专用视图上固定图像和线性渐变。我尝试了一些样式，但每次，图像都会滚动内容。

我能做什么？

<ScrollView>
  {/* TODO: Prevent scroll for this View — Add blur image on background */}
  <View>
    <Image source={{ uri: cover_photo }} />
    <LinearGradient  />
  </View>
  {/* This view is scrollable ABOVE the background image */}
  <View>
     {…content}
  </View>
</ScrollView>

为此，您将无法在 ScrollView 本身中设置图像或线性渐变。相反，您需要在 ScrollView 之外设置图像和线性渐变，并将它们都设置为absolute定位。

然后，将滚动视图的子视图的marginTop设置为与图像和线性渐变的高度相同。下面是一个设置示例：

var SampleApp = React.createClass({
  let LinearGradient = <View style={{ position:'absolute', top:0, left:0, width: width, height:width, backgroundColor: 'rgba(100, 97, 67, .7)' }} />
  render: function() {
    return (
      <View style={{ flex:1, backgroundColor: 'transparent' }}>
        <View>
          <Image style={{ height: width, width: width, position: 'absolute', top:0, left:0 }} source={{ uri: 'http://i01.i.aliimg.com/wsphoto/v0/32297951629_5/5pcs-lot-The-Hollowan-Star-Nicolas-Cage-Stylish-Square-Pillowcase-Cushion-Pillow-Cover.jpg' }} />
          { LinearGradient }
        </View>
        <ScrollView style={{ flex:1 }}>
          <View style={{ marginTop:320 }}>
            <Text>{content}</Text>
          </View>
        </ScrollView>
      </View>
    );
  }
});

这里有一个工作版本。

https://rnplay.org/apps/PXNHyg

如果您不希望 ScrollView 偏离顶部，只需删除 marginTop，如本例所示。

https://rnplay.org/apps/-s97Gw

完整代码如下：

'use strict';
var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Dimensions,
  ScrollView,
  Image
} = React;
let width = Dimensions.get('window').width
var SampleApp = React.createClass({
  render: function() {
    let LinearGradient = <View style={{ position:'absolute', top:0, left:0, width: width, height:width, backgroundColor: 'rgba(100, 97, 67, .7)' }} />
    return (
      <View style={{ flex:1, backgroundColor: 'transparent' }}>
            <View>
            <Image style={{ height: width, width: width, position: 'absolute', top:0, left:0 }} source={{ uri: 'http://i01.i.aliimg.com/wsphoto/v0/32297951629_5/5pcs-lot-The-Hollowan-Star-Nicolas-Cage-Stylish-Square-Pillowcase-Cushion-Pillow-Cover.jpg' }} />
                    { LinearGradient }
          </View>
        <ScrollView style={{ flex:1 }}>
          <View style={{ marginTop:320 }}>
                            <Text>{ipsum}</Text>
          </View>
        </ScrollView>
      </View>
    );
  }
});
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 28,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    fontSize: 19,
    marginBottom: 5,
  },
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);
let ipsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
相关文章：