1

在为移动应用程序创建滚动视图时，一个常见的原则可能是将图像放在列表的最顶部。这可能是为了展示页面的内容。这方面的例子可以在 Spotify 应用程序中找到，其中首先显示专辑封面，然后是其歌曲列表。

import React, { Component } from 'react';
import {
  View,Text,StyleSheet,ScrollView,Image, Animated, Dimensions
} from 'react-native';

HEADER_MAX_HEIGHT = Dimensions.get("window").height*0.4;
HEADER_MIN_HEIGHT = 70;
PROFILE_IMAGE_MAX_HEIGHT = 80;
PROFILE_IMAGE_MIN_HEIGHT = 40;

const IMAGE_SCALE_MAX = 20;
const LABEL_HEADER_MARGIN = 48;

import FastImage, { FastImageProps } from 'react-native-fast-image';
const AnimFastImage = Animated.createAnimatedComponent(FastImage);

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            scrollY: new Animated.Value(0),
            pan: new Animated.ValueXY()
        };
    }

    render() {
       
    return (
        <ScrollView style={{
            flex: 1,
            width: '100%',
            height: '100%',
            backgroundColor: 'white'
            }}
            showsVerticalScrollIndicator={false}
            alwaysBounceVertical={false}
            contentContainerStyle={{ padding: 0 }}   
            onScroll={Animated.event(
                [{ nativeEvent: { contentOffset: { y: this.state.pan.y } } }],
                {
                  useNativeDriver: false,
                },
              )}
            alwaysBounceVertical={false}
            contentInsetAdjustmentBehavior="never"
            scrollEventThrottle={1}
            >
            
            <AnimFastImage 
                animStyle={{
                    transform: [
                      {
                        translateY: this.state.pan.y.interpolate({
                          inputRange: [-1000, 0],
                          outputRange: [-100, 0],
                          extrapolate: 'clamp',
                        }),
                      },
                      {
                        scale: this.state.pan.y.interpolate({
                          inputRange: [-3000, 0],
                          outputRange: [IMAGE_SCALE_MAX, 1],
                          extrapolate: 'clamp',
                        }),
                      },
                    ],
                  }}
                  source={{ uri: 'https://i.picsum.photos/id/1/400/400.jpg?hmac=lOytrN6lDOH_Yx7NwwGIaCtxp6pyuH2V4hD6Eac-VI0', priority: 'high' }}
                  style={styles.img}
                  resizeMode="cover"
            
            />
            <Animated.View
                style={{
                paddingHorizontal: 16,
                transform: [
                    {
                    translateY: this.state.pan.y.interpolate({
                        inputRange: [-1000, 0],
                        outputRange: [LABEL_HEADER_MARGIN * IMAGE_SCALE_MAX, -80],
                        extrapolate: 'clamp',
                    }),
                    },
                ],
            }}>
                <Text style={{ fontWeight: 'bold', fontSize: 20}}>
                    Trần thanh tung
                </Text>
                <View style={{ height: 700 }} />
            </Animated.View>
            
        </ScrollView>
    )}
}
export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  img: {
    backgroundColor: '#ccc',
    width: '100%',
    height: 350,
    justifyContent: 'flex-end',
    padding: 0,
  },
});

但它不像我想要的那样工作。我希望它像电报的用户部分

我想要的是

4

0 回答 0