负载可扩展组件最小化

Question

我正在尝试将我的组件最小化加载，但到目前为止我尝试过的任何方法似乎都不起作用。下面是我的组件：它是一个带有下拉箭头的可折叠组件，父组件中有一堆下拉箭头，但它们都加载扩展了。将它们全部最小化加载会更干净，然后用户可以选择扩展它们。

import { StyleSheet,Text,View,Image,TouchableHighlight,Animated } from 'react-native';
import React from 'react';
export class ExpanderView extends React.Component {
  constructor(props) {
    super(props);
    this.icons = {
      'up': require('./images/Arrowhead-01-128.png'),
      'down'  : require('./images/Arrowhead-Down-01-128.png')
    };
    this.state = {
      animation: new Animated.Value(),
      expanded: true
    };
  }
  toggle() {
    let initialValue    = this.state.expanded? this.state.maxHeight + this.state.minHeight : this.state.minHeight,
        finalValue      = this.state.expanded? this.state.minHeight : this.state.maxHeight + this.state.minHeight;
    this.setState({
      expanded: !this.state.expanded
    });
    this.state.animation.setValue(initialValue);
    Animated.spring(
      this.state.animation, 
      {toValue: finalValue}
    ).start();
  }
  _setMaxHeight(event) {
    this.setState({
      maxHeight: event.nativeEvent.layout.height
    });
  }
  _setMinHeight(event) {
    this.setState({
      minHeight: event.nativeEvent.layout.height
    });
  }
  render() {
    let icon = this.icons['down'];
    if (this.state.expanded) {
      icon = this.icons['up'];
    }
    return (
      <Animated.View style={[styles.container, {height: this.state.animation}]}>
         <View style={styles.titleContainer} onLayout={this._setMinHeight.bind(this)}>
          {/* // Passing props as state variable ain't right */}
            <Text style={styles.title}>{this.props.title}</Text>
            <TouchableHighlight
              style={styles.button}
              onPress={this.toggle.bind(this)}
              underlayColor="#f1f1f1">
              <Image style={styles.buttonImage} source={icon}></Image>
            </TouchableHighlight>
          </View>
          <View style={styles.body} onLayout={this._setMaxHeight.bind(this)}>
            {this.props.children}
          </View>
      </Animated.View>
    );
  }
}
var styles = StyleSheet.create({
  container: {
    backgroundColor:'#fff',
    margin: 10,
    overflow: 'hidden'
  },
  titleContainer: {
    flex: 1,
    flexDirection: 'row'
  },
  inputWrap: {
    flex: 1
  },
  title: {
    flex: 1,
    padding: 10,
    color: '#2a2f43',
    fontWeight: 'bold',
  },
  button: {
  },
  buttonImage: {
    width: 30,
    height: 25
  },
  body: {
    padding: 10,
    paddingTop: 0
  }
});

我猜操纵样式是可以实现的。谢谢。

Answer 1

我现在找到了解决方法：

componentDidMount() {
    setTimeout(() => {
      this.toggle();
    }, 45); 
  }

它运行良好，但不是所需的行为。