react native 原生js最简单的方法操作数据 积分规则手风琴效果

React Native 版本执行0.57的规则

import React, { Component } from 'react';
import { StyleSheet, Text, Animated,View, ScrollView, Image, TouchableOpacity, StatusBar } from 'react-native';
import Nav from '../../components/Nav';
import Px2dp from '../../utils/Px2dp';
import Colors from '../../utils/Colors';

export default class Ruledescription extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: false,
            ruleArr: [
                {
                    "title": "如何获取",
                    "content": "1.会员购物送积分，积分取整，积分的数量以订单实际支付的金额为准，消费1元送1积分，订单实际支付的金额是指除满减等活动优惠、卡券金额、运费、积分；线上订单积分需在确认收货后15天到账，线下门店消费积分到账有一定时间的延迟，一般10分钟左右。\n" +
                        "2.邀请新用户可以获得100积分。\n" +
                        "3.成为会员：100积分。\n" +
                        "4.成为高级会员：500积分。\n" +
                        "5.关注公众号：100积分。\n" +
                        "6.评论：评论≥15字，返20积分 ；评论≥15字且带图片，返30积分。\n" +
                        "7.线下门店会员积分兑换（暂时仅限部分地区）。",
                    "open": true
                },
                {
                    "title": "修改及终止",
                    "content": "迪信优品可根据需要对积分规则增删、修改，规则以网站公布为准。在法律允许的范围内，迪信优品拥有对此规则的最终解释权！",
                    "open": false
                },
                {
                    "title": "积分有效期",
                    "content": "1.用户获得但未使用的积分，将在下一个自然年底过期，迪信优品将定期对过期积分进行作废处理。例2016年 12月31日将清空用户2015年度获得但未使用的积分。\n" +
                        "2.有效期间使用积分支付的商品发生退货或拒收，如果退回时已过有效期，则直接作废处理，不返回。",
                    "open": false
                },
                {
                    "title": "扣减规则",
                    "content": "您退货后，需扣除该商品所获得的积分， 如账号积分已使用，则自商品退款金额中扣除相应现金。若订单享有其他优惠，则根据其他优惠规则办理相应退还手续。",
                    "open": false
                }, {
                    "title": "如何使用",
                    "content": "1.消费时可使用的积分是1000的整数倍，如1000、2000、3000等积分。\n" +
                        "2.若用户的积分小于1000，则不可使用积分。",
                    "open": false
                }
            ],
        }
    }
    render() {
        const { goBack } = this.props.navigation;
        return (
            <View style={styles.container}>
                <StatusBar
                    animated={true}//是否动画
                    hidden={false}//是否隐藏
                    backgroundColor={'#000'}//android 设置状态栏背景颜色
                    translucent={false}//android 设置状态栏是否为透明
                    showHideTransition="fade"//IOS状态栏改变时动画 fade:默认 slide
                    networkActivityIndicatorVisible={this.state.isLoading}//IOS设定网络活动指示器(就是那个菊花)是否显示在状态栏。
                    statusBarStyle={"default"}//状态栏样式 default	默认（IOS为白底黑字、Android为黑底白字）
                    barStyle={"default"}// 状态栏文本的颜色。
                />
                <Nav title={"积分规则"} leftClick={() => { goBack() }} />
                <ScrollView>
                    {
                        this.state.ruleArr.map((item, index) => {
                            return (
                                <View style={styles.ruleItem} key={index}>
                                    <TouchableOpacity activeOpacity={.8} onPress={() => {
                                        let tempArr = this.state.ruleArr;
                                        tempArr[index].open = !tempArr[index].open;
                                        this.setState({
                                            ruleArr: tempArr,
                                        })
                                    }}
                                        style={styles.ruleItemBox}>
                                        <Text style={styles.ruleItemBoxTit}>{item.title}</Text>
                                        <Image source={ item.open?require('../../images/Putaway.png'):require('../../images/Downaway.png')}></Image>
                                    </TouchableOpacity>
                                    {
                                        item.open ?  //列表item下的open为true显示
                                            <View style={styles.ruleItemContent}>
                                                <Text style={styles.ruleItemContentTxt}>{item.content}</Text>
                                            </View> : null
                                    }
                                </View>
                            )
                        })
                    }

                </ScrollView>
            </View >
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    ruleItem: {
        paddingLeft: Px2dp(16),
        paddingRight:Px2dp(16),
        backgroundColor: 'white',
        borderBottomWidth:Pixel,
        borderBottomColor:'#ececec',
    },
    ruleItemBox: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        height:Px2dp(50)
    },
    ruleItemBoxTit:{
        fontSize:Px2dp(15),
        color:Colors.text333
    },
    ruleItemContent:{
        marginTop:Px2dp(10),
        marginBottom:Px2dp(16),
        fontSize:Px2dp(14),
        color:Colors.text666,
    },
    ruleItemContentTxt:{
        lineHeight:Px2dp(20),
        marginTop:Px2dp(-10)
    }
});