在 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

如果您知道它将在

headerHeight

处崩溃，那么您可以向

flexDirection

Animated.View

添加动态

style

。

style={{
  /* ...your Animated.View styles */
  flexDirection: this.props.headerHeight < /* collapse height */ ? 'row' : 'column'
}}