Question

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

我该怎么办？

heroclass = heroclass.toLowerCase();

Answer 1

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

然后，将scrollView的子视图的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从顶部偏移，只需删除marginTop，如this示例中所示。

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内部的图像

1 个答案: