类似于同花顺的 上下左右联动,怎么做?



  • 0_1539831785858_TIM图片20181018104946_20181018110219.gif
    本人实现简单的左右上下联动,通过多个sectionlist和scrollView,但是效果是同时滚动效果不好,实时性不如原生的好,有没有好的方案。



  • import * as React from "react";
    import { StyleSheet, ViewProps } from "react-native";
    import { LargeList, LargeListPropTypes } from "react-native-largelist";
    import { Animated } from "react-native";
    import { idx } from "../Modules";
    
    export class StickyForm extends React.Component<PropType, StateType> {
      _largeList: LargeList;
      constructor(props: any) {
        super(props);
        this.state = { offsetX: new Animated.Value(0) };
      }
    
      render() {
        const event = Animated.event(
          [
            {
              nativeEvent: {
                contentOffset: {
                  x: this.state.offsetX
                }
              }
            }
          ],
          { useNativeDriver: true }
        );
        const largeListStyle = StyleSheet.flatten([
          styles.container,
          this.props.style
        ]);
        return (
          <Animated.ScrollView
            style={largeListStyle}
            horizontal
            bounces={false}
            scrollEventThrottle={1}
            onScroll={event}
            contentContainerStyle={{ flexGrow: 1, minWidth: this.props.formWidth }}
          >
            <LargeList
              {...this.props}
              ref={ref => (this._largeList = ref)}
              style={styles.container}
              renderCell={this.renderIndexPath}
              heightForCell={this.props.heightForIndexPath}
              numberOfRowsInSection={this.props.numberOfRowsInSection}
              renderSection={this.renderSection}
              heightForSection={this.props.heightForSection}
              numberOfSectionPoolSize={1}
              safeMargin={200}
              dynamicMargin={150}
            />
          </Animated.ScrollView>
        );
      }
    
      renderIndexPath = (section: number, row: number) => {
        return this.stickyFirstView(this.props.renderIndexPath(section, row));
      };
    
      renderSection = (section: number) => {
        return this.stickyFirstView(this.props.renderForSection(section));
      };
    
      stickyFirstView(view: React.ReactElement<any>) {
        const childArray = React.Children.toArray(view.props.children);
        if (!childArray || childArray.length < 1) return null;
        const sticky: any = childArray[0];
        const stickStyle: any = StyleSheet.flatten(sticky.props.style);
        const orgTransform = idx(() => stickStyle.transform, []);
        const style = StyleSheet.flatten([
          stickStyle,
          {
            zIndex: 99999999,
            transform: [...orgTransform, { translateX: this.state.offsetX }]
          }
        ]);
    
        return React.cloneElement(
          view,
          null,
          childArray.map((view: React.ReactElement<any>, index) => {
            if (index > 0)
              return React.cloneElement(view, {
                key: index
              });
            const AnimatedClone = Animated.createAnimatedComponent(view.type);
            return React.createElement(AnimatedClone, {
              ...view.props,
              style: style,
              key: index
            });
          })
        );
      }
    
      reloadData() {
        this._largeList.reloadData();
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1
      }
    });
    
    interface PropType extends LargeListPropTypes {
      numberOfRowsInSection: (section: number) => number;
      heightForIndexPath: (section: number, row: number) => number;
      renderIndexPath: (section: number, row: number) => React.ReactElement<any>;
      formWidth: number;
      renderForSection: (section: number) => React.ReactElement<any>;
    }
    
    interface StateType {
      offsetX: Animated.Value;
    }
    


  • 这是我写的一个,你可以参照这种思路,没有维护了 ,公司取消需求了