如何在 React Native 中实现可折叠框？

Question

我正在尝试在 React native.Its 中实现一个可折叠框，它可以很好地处理虚拟数据。但是当我试图列出来自服务器的数据响应时，我得到 error.I 在响应中使用 map 方法列出显示错误 evaluating this.state.details.map 的 details.But。我也很困惑放置地图的位置 method.Below 是我 tried.I 将此文档用于 collapsible 框的代码。

例子

class DetailedView extends Component{
    constructor(props){
        super(props);
        this.icons = {
            'up'    : require('../Images/Arrowhead.png'),
            'down'  : require('../Images/Arrowhead-Down.png')
        };

        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
        });
    }
    state = {details: []};
    componentWillMount(){
        fetch('https://www.mywebsite.com' + this.props.navigation.state.params.id )
        .then((response) => response.json())
        .then((responseData) =>
          this.setState({
              details:responseData
              })
              );
    }
    render(){
           let icon = this.icons['down'];

        if(this.state.expanded){
            icon = this.icons['up'];
        }


 return this.state.details.map(detail =>
            <Animated.View 
                style={[styles.container,{height: this.state.animation}]}>
                {detail.data.curriculum.map(curr =>
                <View onLayout={this._setMinHeight.bind(this)}>
                <Card>
                <CardSection>
                <View style={styles.thumbnailContainerStyle}>
                <Text style={styles.userStyle}>
                Hii
                </Text>
                </View>
                <TouchableHighlight onPress={this.toggle.bind(this)} 
            underlayColor="#f1f1f1">
                <Image style={styles.buttonImage} source={icon}></Image>
                </TouchableHighlight>
                </CardSection>
                </Card>
                </View>   

                <View style={styles.body} onLayout={this._setMaxHeight.bind(this)}>
                    {this.props.children}   
                    <Card>
                    <CardSection>
                    <Text>{this.props.navigation.state.params.id}</Text>
                    </CardSection>
                    </Card>
                </View>
                )}
            </Animated.View>
        );
  }
}

这是使用虚拟数据工作代码的屏幕截图

Answer 1

1.解决错误：

您正在进行的 API 调用是异步的，一旦 API 被调用，代码会在从 API 获得响应之前继续执行。在有任何细节之前，组件会尝试通过 this.state.details 进行映射。

这里的一个解决方案是，你需要在安装组件时设置一个ActicityIndicator/Loader，一旦你从API得到details/response，状态就会改变，然后你就可以通过 this.state.details

映射

将空的详细信息数组添加到您的初始状态。 state = { details:[] }

然后把你的 return this.state.details.map(detail.... 放在这样的 if 条件中

if(this.state.details.length > 0) {
<map here>
} else {
return <ActivityLoader />
}

2。在哪里放置地图 methiod

您需要将它放在一个函数中并从您的渲染方法中调用该函数。

showDetailsFunction() {
 return this.state.details.map(detail =>
}

render() {
 return(
   {this.showDetailsFunction()}
 )
}

如何在 React Native 中实现可折叠框？

How to implement a collapsible box in react native?

jsx

collapse

react-native