在React Native中

Question

我正在尝试为我的应用创建自定义标头，并且希望以某种方式对其进行动画处理。我将描述它应该动画的方式。

如果您查看图像，将会看到一个红色的View，其中包含一个绿色的View和一个蓝色的View。我希望在制作动画时将视图与当前位置并排排列。

我试图为折叠的标题创建代码，并且包含所有内容的红色View正在基于ScrollView缩小，但是我无法将绿色和蓝色Views设置为并排。

Home.js

const HEADER_EXPANDED_VIEW = 200
const HEADER_COLLAPSED_VIEW = 80

export default class HomeActivity extends Component {
    constructor(props) {
        super(props)
        this.state = {
            scrollY: new Animated.Value(0)
        }
    }

    static navigationOptions = {
        title: "HomeActivity",
        header: null
    }

    render() {
        const headerHeight = this.state.scrollY.interpolate({
            inputRange: [0, HEADER_EXPANDED_VIEW - HEADER_COLLAPSED_VIEW],
            outputRange: [HEADER_EXPANDED_VIEW, HEADER_COLLAPSED_VIEW],
            extrapolate: "clamp"
        })

        // console.log(headerHeight)

        return (
            <View style={styles.container}>
                <ScrollView
                    contentContainerStyle={{
                        padding: 16,
                        paddingTop: HEADER_EXPANDED_VIEW,
                        color: "#FFFFFF"
                    }}
                    onScroll={Animated.event([
                        {
                            nativeEvent: {
                                contentOffset: {
                                    y: this.state.scrollY
                                }
                            }
                        }
                    ])}
                >
                    <Text style={styles.title}>This is Title</Text>
                    <Text style={styles.content}>
                    .....
                    </Text>
                </ScrollView>
                <CollapsingHeader headerHeight={headerHeight} />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    scrollContainer: {
        padding: 16
    },
    title: {
        fontSize: 24,
        marginVertical: 16
    }
})

CollapsingHeader.js

export default class CollapsingHeader extends Component {
    render() {
        return (
            <Animated.View
                style={{
                    height: this.props.headerHeight,
                    width: Dimensions.get("screen").width,
                    position: "absolute",
                    top: 0,
                    left: 0,
                    borderWidth: 2,
                    borderColor: "#FF0000",
                    backgroundColor: "#212121"
                }}
            >
                <View
                    style={{
                        borderWidth: 2,
                        borderColor: "#00FF00"
                    }}
                >
                    <MenuButton />
                </View>

                <View
                    style={{
                        flexDirection: "row",
                        borderWidth: 2,
                        borderColor: "#0000FF"
                    }}
                >
                    <View
                        style={{
                            flexGrow: 1
                        }}
                    >
                        <Text
                            style={{
                                fontFamily: "NunitoSans-Bold",
                                fontSize: 40,
                                color: "#FFFFFF"
                            }}
                        >
                            Home
                        </Text>
                    </View>

                    <SortButton />

                    <SearchButton />
                </View>
            </Animated.View>
        )
    }
}

我对React Native还是比较陌生，请假设我对此知之甚少。

Answer 1

如果您知道keyCode即将崩溃的位置，则可以在headerHeight flexDirection上添加动态Animated.View。

style