Графики RTL в React родные

Question

Потратив много часов на просмотр графиков в RTL для реагирования на натив, я ничего не нашел в отношении RTL. Есть ли какие-либо графики или графики, доступные в RTL для реагирования на нативные?

Answer 1

На самом деле все довольно просто. Вы можете выбрать любую библиотеку диаграмм, например эту (используемую для примеров ниже) ваш график: например, если у вас есть:

const data = [50, 10, 30, 20, -10, -20, 0, 25, -5, 10]

Затем в RTL вы хотите передать эти данные на ваш график:

const dataRTL = [...data].reverse() 
/** [10, -5, 25, 0, -20, -10, 20, 30, 10, 50]  **/

Если у вас есть ось X, вам также необходимо переверните данные этой оси
Если вы хотите поместить ось Y на правую сторону, вы можете изменить порядок вашего компонента (см. пример ниже)

Пример без RTL

 render() {
    const data = [50, 10, 30, 20, -10, -20, 0, 25, -5, 10]
    const xLabel = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']

    return (
      <View>
        <View style={{ height: 300, flexDirection: 'row' }}>
          <YAxis
            data={data}
            contentInset={{ top: 20, bottom: 20 }}
            svg={{ fill: 'black', fontSize: 12 }}
            numberOfTicks={8}
            formatLabel={(value) => `${value}ºC`}
          />
          <LineChart
            style={{ flex: 1, marginRight: 10 }}
            data={data}
            svg={{ stroke: 'rgb(134, 65, 244)' }}
            contentInset={{ top: 20, bottom: 20 }}
          >
            <Grid />
          </LineChart>

        </View>
        <View>
          <XAxis
            style={{ marginHorizontal: 10 }}
            data={data}
            formatLabel={(value, index) => xLabel[index]}
            contentInset={{ left: 22, right: 0 }}
            svg={{ fontSize: 12, fill: 'black' }}
          />
        </View>
      </View>
    )

Пример с RTL

  render() {
    const data = [50, 10, 30, 20, -10, -20, 0, 25, -5, 10]
    const dataRTL = [...data].reverse()
    const xLabel = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
    const xLabelRTL = [...xLabel].reverse()

    return (
      <View>
        <View style={{ height: 300, flexDirection: 'row' }}>
          <LineChart
            style={{ flex: 1, marginLeft: 10 }}
            data={dataRTL}
            svg={{ stroke: 'rgb(134, 65, 244)' }}
            contentInset={{ top: 20, bottom: 20 }}
          >
            <Grid />
          </LineChart>
          <YAxis
            data={dataRTL}
            contentInset={{ top: 20, bottom: 20 }}
            svg={{ fill: 'black', fontSize: 12 }}
            numberOfTicks={8}
            formatLabel={(value) => `${value}ºC`}
          />
        </View>
        <View>
          <XAxis
            style={{ marginHorizontal: 10 }}
            data={dataRTL}
            formatLabel={(value, index) => xLabelRTL[index]}
            contentInset={{ left: 0, right: 22 }}
            svg={{ fontSize: 12, fill: 'black' }}
          />
        </View>
      </View>
    )

(обратите внимание, что я также поместил YAxis ниже компонента LineChart, чтобы расположить ось Y с правой стороны)