Question

我正在开发名为react-native-chart-wrapper的反应原生图表库，其中包含BarChart，LineChart等......

我想向js公开几个函数（例如，moveViewToX）

在android中，BarChartManager和LineChartManager都继承了BarLineChartBaseManager，因此可以在BarLineChartBaseManager中放置getCommandsMap和receiveCommand。

BarLineChartBaseManager

protected static final int MOVE_VIEW_TO = 1;

@Nullable
@Override
public Map<String, Integer> getCommandsMap() {
    return MapBuilder.of("moveViewToX", MOVE_VIEW_TO_X);    
}

@Override
public void receiveCommand(T root, int commandId, @Nullable ReadableArray args) {
    switch (commandId) {
        case MOVE_VIEW_TO_X:
            root.moveViewToX((float) args.getDouble(0));
            return;
    }

    super.receiveCommand(root, commandId, args);
}

但是如何在js部分做到这一点？

目前，js代码列表如下，简单明了。

BARCHART

const iface = {
  name: 'BarChart',
  propTypes: {
    ...BarLineChartBase.propTypes,

    drawValueAboveBar: PropTypes.bool,
    drawBarShadow: PropTypes.bool,

    data:  barData
  }
};

export default requireNativeComponent('RNBarChart', iface, {
  nativeOnly: { onSelect: true }
});

应用于LineChart

const iface = {
  name: 'LineChart',
  propTypes: {
    ...BarLineChartBase.propTypes,

    data: lineData,
  }
};

export default requireNativeComponent('RNLineChart', iface, {
  nativeOnly: { onSelect: true }
});

我不想在每个图表定义中重复下面的js代码，并且不会在反应中建议继承。我该怎么办？

moveViewToX(x) {
  UIManager.dispatchViewManagerCommand(
      React.findNodeHandle(this),
      UIManager.RNBarChart.Commands.moveViewToX,
      [x],
  );
}

更新

我尝试了高阶作曲。

可移动

export default function Movable(WrappedComponent) {
  return class MovableExtended extends React.Component {
    move() {
      console.log('I extended the wrapped component with functionality move')
    }

    render() {
      return <WrappedComponent move={this.move}/>
    }
  }
}

可突出显示

export default function Highlightable(WrappedComponent) {
  return class HighlightableExtended extends React.Component {
    highlight() {
      console.log('I extended the wrapped component with functionality highlight')
    }

    render() {
      return <WrappedComponent highlight={this.highlight}/>
    }
  }
}

BarLineChart

export default HighlightableChart(MovableChart(BarLineChart))

应用

class App extends Component {
  render() {
    return (
        <BarLineChart ref="chart"/>
    );
  }
}

this.refs.chart.highlight()功能正常。和 Uncaught TypeError: this.refs.chart.move is not a function

Answer 1

最终解决方案

这是我发现的最简单的模式。易于扩展。

HeatINDEX[,HI:=HeatIndex(HeatINDEX$Ave_MeanT, HeatINDEX$Ave_MeanRH)]

在本机中共享组件之间的共同功能

1 个答案: