Javascript 反应本机：使用选项卡设置收缩标题的动画 目标

我正在尝试创建一个带有动画收缩标题的视图，该视图包含带有滚动内容的选项卡。 参见图

安装程序 我正在使用带有TabNavigator的react导航。标题是具有固定高度的组件，当前位于TabNavigator上方。标题始终固定在选项卡上方，占用了宝贵的空间

尝试过的方法

• 我已经试过了，但是因为标签的缘故，我没法让它工作

• 我还尝试用两个ScrollView/FlatList来实现它：一个环绕整个视图，另一个环绕内容，但我无法在到达滚动边缘时进行本地传播

预期效果与谷歌Play商店中的效果相同

---

您可以通过使用

RN animated

组件自己控制动画滚动动作来实现这一点。这并不完全是您想要的，但是可以轻松地使用它来获得正确的结果，并且您只需要使用任何列表视图的

renderScrollComponent

方法来捕获相同的内容。。。所以下面是一些代码：

代码

constructor(props) {
    super(props);

    this.headerHeight = 150;

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

render() {
    return (
        <View style={[
                styles.container,
                {
                    width: this.props.display.width,
                    height: this.props.display.height,
                }
            ]}>

            { this.renderScrollView() }
            { this.renderListHeader() }

        </View>
    );
}


renderListHeader() {
    return (
        <Animated.View
            style={[
                styles.headerContainer,
                {
                    width: this.props.display.width,
                    height: this.state.scrollY.interpolate({
                        inputRange: [0, this.headerHeight],
                        outputRange: [this.headerHeight, this.headerHeight / 2],
                        extrapolate: 'clamp',
                    }),
                }
            ]}>

            <Text style={[bodyFontStyle, styles.testingText]}>
                I am a test! 
            </Text>
        </Animated.View>
    );
}


renderScrollView() {
    return (
        <Animated.ScrollView
            bounces={false}
            scrollEventThrottle={1}
            showsVerticalScrollIndicator={false}
            showsHorizontalScrollIndicator={false}
            onScroll={Animated.event( [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }] )}>

            <Animated.View
                style={[
                    styles.innerScrollContainer,
                    {
                        height: 800,
                        width: this.props.display.width,
                        marginTop: this.headerHeight,
                    }
                ]}>

                <Text style={[bodyFontStyle, styles.innerContainerText]}>
                    Look ma! No Hands!
                </Text>
            </Animated.View>
        </Animated.ScrollView>
    );
}


const styles = StyleSheet.create({
    container: {
        position: 'relative',
        backgroundColor: 'transparent',
    },
    headerContainer: {
        position: 'absolute',
        top: 0, left: 0,
        overflow: 'hidden',
        backgroundColor: 'green',
   },
   innerScrollContainer: {
        position: 'relative',
        backgroundColor: 'white',
   },
   innerContainerText: { color: 'black' },
   testingText: { color: 'black' },
});

构造函数（道具）{
超级（道具）；
这个.人头高度=150；
此.state={
滚动：新的动画值（0），
};
}
render（）{
返回(
{this.renderScrollView（）}
{this.renderLisHeader（）}
);
}
renderlisheader（）{
返回(
我是一个测试！
);
}
renderScrollView（）{
返回(
看，妈妈！没有手！
);
}
const styles=StyleSheet.create({
容器：{
位置：'相对'，
背景色：“透明”，
},
负责人：{
位置：'绝对'，
顶部：0，左侧：0，
溢出：“隐藏”，
背景颜色：“绿色”，
},
内部滚动容器：{
位置：'相对'，
背景颜色：“白色”，
},
innerContainerText:{color:'black'}，
测试文本：{color:'black'}，
});

我相信你已经了解了这段代码的作用。。。但以防万一，这里有故障

代码分解

我使用this.props.display.width/height道具向下发送当前设备屏幕宽度/高度的系统级宽度/高度，但如果您更喜欢flex，请使用它

您不一定需要硬编码或静态头大小，只需要在类代码中使用它的中心位置（即类级别或JS模块级别）

---

最后，仅仅因为我将滚动数据插值到框的高度，并不意味着您必须这样做。在您展示的示例中，它看起来更像是要向上平移长方体，而不是缩小其高度。

我通过

动画.diffClamp

实现了这一点-您可以查看代码。我已经写了一篇文章更详细地解释了代码

*我正在为UI组件使用本机基本包（以简化UI代码），但动画插值/定义在使用或不使用它时是相同的

---

您是否为标题/选项卡使用特定的库？您的实现的当前行为是什么？好吧，嵌套ScrollView不是一个好主意。@mdumy添加了一些关于当前设置的当前实现细节：）谢谢@JeremiStadler，我在那里没有帐户，RN Playerd也没有了，非常感谢。好主意，但标题只有在到达列表顶部时才会展开，而不是在底部向上滚动时。另外：不需要一个expo帐户：）@JeremiStadler只要稍微修改一下这个代码就可以很容易地做到这一点。因为这个代码可以做你需要做的事情，你只需要修改它就可以了，一旦你成功了，你能选择正确的答案吗？谢谢，我会试试的it@AndiGu我遵循了你的教程，在平面列表的slowscroll上发现了一个bug。当缓慢滚动时，Android上的布局会闪烁。