javascript - 使用 SectionList 和标题 View 在 Y 上进行翻译，在滚动条上创建空白区域 - native react

Question

我是 React Native 和 Animated API 的新手，所以我正在尝试像这样做一个简单的视差标题和 Animated SectionList

我的代码是

export default class Edit extends Component {

constructor(props) {
    super(props)

    this.state = {
        fullName: '',
        scrollEnabled: true,
        scrollY: new Animated.Value(0),
    }
}

_renderSectionHeader(section){
    return <View style={[styles.SectionHeaderViewStyle]}><Text style={styles.SectionHeaderStyle}> {section.title} </Text></View>;
}

_renderItem(item){
    return  <View><TextFieldValidate /></View>;
}
_onScroll(event) {
    // console.log(event.nativeEvent.contentOffset.y);
}

render() {

    const backgroundScrollY = this.state.scrollY.interpolate({
        inputRange: [0, 224],
        outputRange: [0, -170],
        extrapolate: 'clamp',
    });

    const listScrollY = this.state.scrollY.interpolate({
        inputRange: [0, 224],
        outputRange: [0, -170],
        extrapolate: 'clamp',
    });

    const infoOpacity = this.state.scrollY.interpolate({
        inputRange: [0, 0.5, 150],
        outputRange: [1, 1, 0],
        extrapolate: 'clamp',
    });


    const AnimatedSectionList = Animated.createAnimatedComponent(SectionList)

    return (

        <View style={{flex: 1}}>
            <View style={{position: 'relative', height: 224, justifyContent: 'center', alignItems: 'center'}}>
                <Animated.Image source={Images.profileEdit} style={[styles.background, {transform: [{translateY: backgroundScrollY}]}]} blurRadius={1.5}/>
                <Text style={styles.fullNameHeader}>Steve Smith</Text>
                <Animated.View style={{opacity: infoOpacity, position: 'relative', justifyContent: 'center', alignItems: 'center'}}>
                    <AnimatedCircularProgress size={76} width={4} fill={50} rotation={0} tintColor={Colors.cyan} backgroundColor={Colors.white}>
                        {
                            (fill) => (
                                <Image source={require('./img/details_icon.png')}/>
                            )
                        }
                    </AnimatedCircularProgress>
                    <Text style={styles.communityNameHeader}>Jumeirah Village Circle</Text>
                    <Text style={styles.profileCompletionHeader}>50% Profile Completion</Text>
                </Animated.View>
            </View>


            <AnimatedSectionList
                bounces={false}
                scrollEnabled={this.state.scrollEnabled}
                style={[{position: 'relative'}, {transform: [{translateY: listScrollY}]}]}
                onScroll={
                    Animated.event(
                        [{nativeEvent: {contentOffset: {y: (this.state.scrollY)}}}],
                        {useNativeDriver: true, listener: this._onScroll.bind(this)}
                    )
                }
                sections={[
                    {title: 'MY DETAILS', data: myDetailsFields},
                    {title: 'MY COMMUNITY', data: myCommunity},
                    {title: 'MY FAMILY', data: myFamily},
                ]}

                renderSectionHeader={({section}) => this._renderSectionHeader(section)}

                renderItem={({item}) => this._renderItem(item)}

                keyExtractor={(item, index) => index}

                stickySectionHeadersEnabled={true}

            />

        </View>

    );
  }
}

滚动时请帮忙删除底部的空白区域我尝试了“AnimatedSectionList”样式的 paddingBottom:950 但它错过了键盘查看和滚动

style={[{position: 'relative'}, {paddingBottom:950}, {transform: [{translateY: listScrollY}]}]}

添加 marginBottom 之后

Answer 1

如果有人对答案感兴趣，我只是将“marginBottom:-170”添加到 AnimatedSectionList 而不是“paddingBottom:950”

style={[{position: 'relative'}, {marginBottom:-170}, {backgroundColor:'blue'}, {transform: [{translateY: listScrollY}]}]}