Анимация просмотров сверху вниз в бок о бок в 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'
}}