React Native 中可调整大小的 Flex 布局 [英] Resizable Flex Layout in React Native

问题描述

如何在 React Native 中创建可调整大小的布局?像这样:

How can I create a resizable layout in react native? Like this:

这是一个演示，但适用于 ReactJS:https://leefsmp.github.io/Re-Flex/index.html

Here is a demo but for ReactJS: https://leefsmp.github.io/Re-Flex/index.html

推荐答案

我在实现目标的过程中也遇到了这个问题，我像下面这样解决了这个问题.

I also had this problem on my way to achieve the goals and I solved this like below.

希望这可以帮助其他有类似情况的人节省时间.

Hope this could be helpful for the others who has similar case to save time.

https://github.com/brucelin0325/resizable_layout

MyComponent.js

import React, { Component } from 'react'; 
import { StyleSheet, View, Dimensions, PanResponder, Animated } from 'react-native';

export default class MyComponent extends Component {

    constructor(props) {
        super(props);

        this.state = {
            offset          : 0,
            topHeight       : 40, // min height for top pane header
            bottomHeight    : 40, // min height for bottom pane header,
            deviceHeight    : Dimensions.get('window').height,
            isDividerClicked: false,

            pan             : new Animated.ValueXY()
        }

    }

    componentWillMount() {
        this._panResponder = PanResponder.create({
            onMoveShouldSetResponderCapture: () => true,
            onMoveShouldSetPanResponderCapture: () => true,

            // Initially, set the Y position offset when touch start
            onPanResponderGrant: (e, gestureState) => {
                this.setState({
                    offset: e.nativeEvent.pageY,
                    isDividerClicked: true
                })
            },

            // When we drag the divider, set the bottomHeight (component state) again.
            onPanResponderMove: (e, gestureState) => {

                this.setState({
                    bottomHeight    : gestureState.moveY > (this.state.deviceHeight - 40) ? 40 : this.state.deviceHeight - gestureState.moveY,
                    offset: e.nativeEvent.pageY
                })
            },

            onPanResponderRelease: (e, gestureState) => {
                // Do something here for the touch end event
                this.setState({
                    offset: e.nativeEvent.pageY,
                    isDividerClicked: false
                })
            }
        });
    }


    render() {
        return ( 
            <View style={styles.content}>

                {/* Top View */}
                <Animated.View 
                    style       = {[{backgroundColor: 'pink', minHeight: 40, flex: 1}, {height: this.state.topHeight}]}

                >
                </Animated.View>

                {/* Divider */}
                <View 
                    style={[{height: 10}, this.state.isDividerClicked ? {backgroundColor: '#666'} : {backgroundColor: '#e2e2e2'}]} 
                    {...this._panResponder.panHandlers}
                >
                </View>

                {/* Bottom View */}
                <Animated.View 
                    style={[{backgroundColor: 'green', minHeight: 40}, {height: this.state.bottomHeight}]} 

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

const styles = StyleSheet.create({
    content         : {
        flex        : 1,
        flexDirection: 'column'
    },
})

这篇关于React Native 中可调整大小的 Flex 布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！