React Native - Диаграмма касания и победы

Как сделать так, чтобы пресс-конференция не была перехвачена таблицей побед, а вместо этого «щелкнула» до родителя, которого можно коснуться? По сути, я хочу иметь возможность щелкнуть в любом месте диаграммы и перейти к подробному просмотру. В конце концов внутри элемента touchableOpacity появятся другие элементы, поэтому я не хочу напрямую фиксировать нажатие на диаграмме.

Прошу прощения за плохую формулировку, я новичок в React и React Native.

  <TouchableOpacity
    style={styles.panel}
    onPress={this.handleSubmit.bind(this)}>
    <VictoryChart>
      <VictoryBar
        style={{
          data: {fill: "blue"}
        }}
        data={data}
        x="quarter"
        y="earnings"
      />
    </VictoryChart>
  </TouchableOpacity>

react-native javascript events touchableopacity victory-charts
person linzlu    schedule 22.10.2017    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Ответ на этот вопрос дан здесь. Добавление опоры containerComponent, как описано в ссылке, в ваш компонент VictoryChart вызовет функцию onPress в TouchableOpacity при нажатии.

person adhdj    schedule 02.07.2020

arrow_upward
0
arrow_downward

Вы пробовали опору events? Прочтите об этом здесь

Документы показывают этот пример ...

events={[{
    childName: "all",
    target: "data",
    eventHandlers: {
      onClick: () => {
        return [
          {
            childName: "area-2",
            target: "data",
            mutation: (props) => ({ style: Object.assign({}, props.style, { fill: "gold" }) })
          }, {
            childName: "area-3",
            target: "data",
            mutation: (props) => ({ style: Object.assign({}, props.style, { fill: "orange" }) })
          }, {
            childName: "area-4",
            target: "data",
            mutation: (props) => ({ style: Object.assign({}, props.style, { fill: "red" }) })
          }
        ];
      }
    }
  }]
}

Здесь показан обработчик onClick, который используется для изменения фактических данных, но я не вижу причин, по которым вы не могли бы использовать его для перехода к экрану сведений. Я не уверен, какой синтаксис вам понадобится.

person Chris Geirman    schedule 22.10.2017
comment
Кажется, это не совсем то, что я ищу. Опора событий позволяет мне перехватывать прикосновение к диаграмме, однако в конечном итоге я планирую иметь больше элементов, помимо диаграммы, внутри моего сенсорного экрана, поэтому я ищу далеко, чтобы зафиксировать событие на этом уровне. - person linzlu; 23.10.2017

arrow_upward
0
arrow_downward

Просто подумал о другом подходе. Попробуйте добавить второй невидимый вид после VictoryChart. Я назову его InvisibleView. Вставьте и VictoryChart, и InvisibleView в родительский вид, сделав InvisibleView доступным для прикосновения вот так ...

const InvisibleView = () => <View style={StyleSheet.absoluteFill} />/

<View>
    <VictoryChart ...>
    <TouchableOpacity...>
        <InvisibleView />
    </TouchableOpacity>
</View>
person Chris Geirman    schedule 26.10.2017