RN 页面的收缩和展开

import React from 'react';
import { View, Text, TouchableWithoutFeedback, StyleSheet } from 'react-native';

import Course from './course'
import { hidden } from 'ansi-colors';

let Dimensions = require('Dimensions');
let screenWidth = Dimensions.get('window').width;
let dialogWidth = screenWidth;

export default class ClassBoxMore extends React.Component {

    //课程更多、收起按钮
    constructor(props) {
        super(props);
        this.state = {
            display_name: '更多',
            display_height: 115,
        };
    }

    display_name() {
　　　　　//点击更多 按钮变为“收起”
        if (this.state.display_name == '更多') {
            this.setState({
                display_height: null,  //改变height的值为空，即height自适应
                display_name: '收起',
            })
        }
　　　　
　　　　　//点击收起 按钮变为更多  高度变回为115
        else if (this.state.display_name == '收起') {
            this.setState({
                display_height: 115,
                display_name: '更多',
            })
        }
    }


    render() {
        return (
            <View style={styles.classBox}>
                <View style={styles.classBoxViewHead}>
                    <View style={styles.viewBorder}>
                        <View style={styles.classNameView}>
                            <Text style={styles.className}>17365</Text>
                        </View>
                    </View>
                    <View style={styles.btnManageClass}>
                        <TouchableWithoutFeedback
                            onPress={() => {
                                this.props.navigation.navigate("ClassManage")
                            }}>
                            <Text style={styles.btnManageClassText}>管理</Text>
                        </TouchableWithoutFeedback>
                    </View>
                </View>
                <View >
                    <View style={{ overflow: 'hidden', height: this.state.display_height }}>
                        <Course navigation={this.props.navigation} />
                        <Course navigation={this.props.navigation} />
                        <Course navigation={this.props.navigation} />
                        <Course navigation={this.props.navigation} />
                        <Course navigation={this.props.navigation} />
                    </View>

                    {/* 按钮 */}
                    <TouchableWithoutFeedback onPress={() => { this.display_name() }}>
                        <View style={styles.textMoreBox}>
                            <Text style={styles.textMore}>{this.state.display_name}</Text>
                        </View>
                    </TouchableWithoutFeedback>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    classBox: {
        marginTop: 20,
        padding: 20,
        paddingTop: 10,
        borderRadius: 10,
        width: dialogWidth - 20,
        backgroundColor: '#fff',
    },
    buttonClose: {
        backgroundColor: 'yellow',
        alignSelf: 'flex-end',
        flex: 1,
    },
    classBoxViewHead: {
        flexDirection: 'row',
        borderBottomColor: '#E5E5E5',
        borderBottomWidth: 2,
        paddingBottom: 10,

    },
    btnManageClass: {
        paddingLeft: 10,
        paddingRight: 10,
        borderRadius: 20,
        backgroundColor: '#e29b04',
        alignItems: 'center',
    },
    btnManageClassText: {
        color: '#fff',
        fontSize: 20
    },
    textMoreBox: {
        marginTop: 10,
        position: 'relative',
        justifyContent: 'flex-end',
        alignItems: 'center'
    }, textMore: {
        fontSize: 15,
        color: '#0c89db'
    },
    viewBorder: {
        flex: 5,
        justifyContent: 'center'
    },
    classNameView: {
        borderLeftWidth: 3,
        borderLeftColor: '#e29b04',
        margin: -20
    },
    className: {
        marginLeft: 16,
        color: '#000',
        fontSize: 20
    },
});