javascript - 可扩展文本元素无法正确显示全文

Question

我正在尝试理解一个教程，该教程构建了一组面板，这些面板在单击时展开以显示更多文本，并在单击时折叠以隐藏除标题之外的所有内容。

当我在 iOS 模拟器上运行时，面板被初始化为打开状态并显示所有文本。如果我折叠其中一个面板并重新打开它，它只会显示前两行文本，我什至无法滚动查看其余文本。如果我再次折叠它，面板似乎会在开始折叠动画之前将其自身重新初始化为正确的大小，显示所有文本。

我认为问题出在切换上，但我不确定为什么动画没有将面板扩展到正确的高度。

class Panel extends Component{
constructor(props){
    super(props);

    this.state = {
        title       : props.title,
        expanded    : true,
        animation   : new Animated.Value()
    };
}

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)}>
                <Text style={styles.title}>{this.state.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>
    );
}
}

Answer 1

您可以使用提供此类功能的react-native包，引用这个可能对您有帮助的包 react-native-accordion .