使用 React native 将图像固定在 ScrollView 中

Question

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

我能做什么？

<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>

Answer 1

为此，您将无法在 ScrollView 本身中设置 Image 或 LinearGradient。相反，您需要在 ScrollView 之外设置 Image 和 LinearGradient，并将它们都设置为 absolute 定位。

然后，设置scrollView的子View的marginTop与图片高度和LinearGradient相同。这是一个示例设置：

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

有一个工作版本 here。

https://rnplay.org/apps/PXNHyg

如果您不希望 ScrollView 从顶部偏移，只需像 this 示例中那样删除 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."

使用 React native 将图像固定在 ScrollView 中

Image fixed inside the ScrollView with React native

javascript

scrollview

ios

reactjs

react-native