使用React原生固定在ScrollView中的圖像

Question

我想修復一個圖像和一個線性漸變以及scrollview組件內的專用視圖。我嘗試了一些樣式，但每次都會隨圖像滾動顯示內容。

我該怎麼辦？

<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本身中設置圖像或LinearGradient。相反，您需要將Image和LinearGradient設置爲ScrollView的外部，並將它們都設置爲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

如果你不想滾動型從頂偏，只是刪除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."