RN-animated

import React, {Component} from ‘react’;
import {
View,
Text,
Animated,
ScrollView,
Button,
TouchableOpacity,
Easing,
Image,
ImageBackground,
} from ‘react-native’;
// import {} from ‘react-native-webview’;
import HTMLView from ‘react-native-htmlview’;
import styles from ‘./style’;
import {getSchoolNews} from ‘@/apis/coursetable’;
import {Modal} from ‘@ant-design/react-native’;
function renderNode(node, index, siblings, parent, defaultRenderer) {
// if (node.name == ‘img’) {
// const specialSyle = node.attribs.style;
// console.log(node.attribs, ‘4646464688’);
// return (
//
// {defaultRenderer(node.children, parent)}
//
// );
// }
}
class Myaccordion extends Component {
state = {
isModalVisible: false, // 弹窗是否可见
modalWidth: new Animated.Value(1), // 弹窗初始宽度
modalHeight: new Animated.Value(0), // 弹窗初始高度
modalHeight2: new Animated.Value(1),
modalHeight3: new Animated.Value(1),
schoolnews: [], //学校新闻
schoolnewsflag: [false, true, true],
modalgroup: ‘’,
};
componentDidMount = () => {
this.getNews();
};
getNews = () => {
getSchoolNews().then(res => {
// console.log(res);
let data = res.data;
// console.log(data, ‘1111’);
this.setState({schoolnews: data});
});
};
startAnimated = (height, i) => {
let modalgroup = [];
modalgroup = [
{name: ‘modalHeight’, qparam: this.state.modalHeight},
{name: ‘modalHeight2’, qparam: this.state.modalHeight2},
{name: ‘modalHeight3’, qparam: this.state.modalHeight3},
];

modalgroup.forEach((item, index) => {
  if (height == item.name) {
    // if (this.state.schoolnewsflag[index]) {
    // 同步执行的动画
    Animated.parallel([
      Animated.timing(item.qparam, {
        toValue: 0,
        duration: 500,
        // useNativeDriver: true,
        easing: Easing.linear,
      }),
    ]).start(() => {
      let param1 = this.state.schoolnewsflag;
      param1[index] = false;

      this.setState({schoolnewsflag: param1});
    });
  } else {
    Animated.parallel([
      Animated.timing(item.qparam, {
        toValue: 1,
        duration: 500,
        // useNativeDriver: true,
        easing: Easing.linear,
      }),
    ]).start(() => {
      let param1 = this.state.schoolnewsflag;
      // param1[i] = true;
      param1[index] = true;
      this.setState({schoolnewsflag: param1});
    });
  }
});

};
//htmlview 渲染子节点
/* renderNode = (node, index, siblings, parent, defaultRenderer) => {
if (node.name == ‘p’) {
const specialSyle = node.attribs.style;
return (

{defaultRenderer(node.children, parent)}

);
}
}; */

//净化时间
/* prettyTime = date => {
let time = new Date(date);
console.log(time, ‘888888’);
}; */
shownotice = () => {
console.log(‘1’);
};
render() {
const modalWidth = this.state.modalWidth.interpolate({
inputRange: [0, 1],
outputRange: [1, 1],
});
const modalHeight = this.state.modalHeight.interpolate({
inputRange: [0, 1],
outputRange: [300, 1],
});
const modalHeight2 = this.state.modalHeight2.interpolate({
inputRange: [0, 1],
outputRange: [300, 1],
});
const modalHeight3 = this.state.modalHeight3.interpolate({
inputRange: [0, 1],
outputRange: [300, 1],
});
const {schoolnews, schoolnewsflag} = this.state;
return (

<TouchableOpacity
style={styles.schoolnewhead}
onPress={() => this.startAnimated(‘modalHeight’, 0)}>
学校公告
{schoolnewsflag[0] ? (
{’\ue683’}
) : (
{’\ue681’}
)}

    <Animated.View
      style={[
        styles.modalContent,
        {
          height: modalHeight,
          /* transform: [
            {
              scaleY: 1,
            },
          ], */
        },
      ]}>
      <View>
        {/* <Animated.Text>学校公告</Animated.Text> */}
        <ScrollView>
          {schoolnews.map((item, index) => {
            return (
              <Animated.View
                key={index}
                style={
                  index % 3 == 1
                    ? styles.partshow1
                    : index % 3 == 2
                    ? styles.partshow2
                    : styles.partshow
                }>
                <TouchableOpacity onPress={() => this.props.callback(item)}>
                  <Animated.View style={styles.htmlshow}>
                    <Text>{item.title}</Text>
                  </Animated.View>
                  {/* <View>{item.content}</View> */}
                  <HTMLView
                    value={item.content}
                    renderNode={renderNode}
                    style={styles.htmlshow}
                  />
                  <Animated.Text>{item.createtime}</Animated.Text>
                </TouchableOpacity>
              </Animated.View>
            );
          })}
        </ScrollView>
      </View>
    </Animated.View>

    <TouchableOpacity
      style={styles.schoolnewheadclass}
      onPress={() => this.startAnimated('modalHeight2', 1)}>
      <Text style={styles.titletop}>班级通知</Text>
      {schoolnewsflag[1] ? (
        <Text style={styles.item_icon2}>{'\ue683'}</Text>
      ) : (
        <Text style={styles.item_icon2}>{'\ue681'}</Text>
      )}
    </TouchableOpacity>

    <Animated.View
      style={[
        styles.modalContent,
        {
          height: modalHeight2,
          //   transform: [
          //     {
          //       scaleY: 1,
          //     },
          //   ],
        },
      ]}>
      <View>
        {/* <Animated.Text>学校公告</Animated.Text> */}
        <ScrollView>
          {schoolnews.map((item, index) => {
            return (
              <Animated.View
                key={index}
                style={
                  index % 3 == 1
                    ? styles.partshow1
                    : index % 3 == 2
                    ? styles.partshow2
                    : styles.partshow
                }>
                <TouchableOpacity onPress={() => this.props.callback(item)}>
                  <Animated.View style={styles.htmlshow}>
                    <Text>{item.title}</Text>
                  </Animated.View>
                  {/* <View>{item.content}</View> */}
                  <HTMLView
                    value={item.content}
                    renderNode={renderNode}
                    style={styles.htmlshow}
                  />
                  <Animated.Text>{item.createtime}</Animated.Text>
                </TouchableOpacity>
              </Animated.View>
            );
          })}
        </ScrollView>
      </View>
    </Animated.View>
    <TouchableOpacity
      style={styles.schoolnewheadplan}
      onPress={() => this.startAnimated('modalHeight3', 2)}>
      <Text style={styles.titletop}>我的计划</Text>
      {schoolnewsflag[2] ? (
        <Text style={styles.item_icon3}>{'\ue683'}</Text>
      ) : (
        <Text style={styles.item_icon3}>{'\ue681'}</Text>
      )}
    </TouchableOpacity>
    <Animated.View
      style={[
        styles.modalContent,
        {
          height: modalHeight3,
          /* transform: [
            {
              scaleY: 1,
            },
          ], */
        },
      ]}>
      <View>
        {/* <Animated.Text>学校公告</Animated.Text> */}
        <ScrollView>
          {schoolnews.map((item, index) => {
            return (
              <Animated.View
                key={index}
                style={
                  index % 3 == 1
                    ? styles.partshow1
                    : index % 3 == 2
                    ? styles.partshow2
                    : styles.partshow
                }>
                <TouchableOpacity onPress={() => this.props.callback(item)}>
                  <Animated.View style={styles.htmlshow}>
                    <Text>{item.title}</Text>
                  </Animated.View>
                  {/* <View>{item.content}</View> */}
                  <HTMLView
                    value={item.content}
                    renderNode={renderNode}
                    style={styles.htmlshow}
                  />
                  <Animated.Text>{item.createtime}</Animated.Text>
                </TouchableOpacity>
              </Animated.View>
            );
          })}
        </ScrollView>
      </View>
    </Animated.View>
  </View>
);

}
}
export default Myaccordion;
实现简单的拉伸,运用了.interpolate