Блог

Я использую набор диаграмм react native. Если вы добавляете функцию, вызываемую decorator в вашу линейную диаграмму, вы можете добавить поведение на свой график при нажатии на точки данных. Это управляется путем помещения возвращаемого значения функции декоратора в G-тег из react-native-svg.

Я хочу добавить a TextInput в свой декоратор. Существует закрытая проблема github в react-native-svg, в которой есть некоторые предложения, позволяющие мне отображать ввод текста. Я получаю как вызываемый svg-элемент rect , так и свой TextInput для рендеринга , я также могу использовать автофокус для ввода текста TextInput , однако он не доступен для кликабельности.

Как сделать текстовый ввод декоратора интерактивным?

Мой декоратор выглядит так:

 () => {
    if (tooltipPos.visible) {
      return (
        <>
          <Svg
            height="50%"
            width="50%"
            viewBox={`0 0 300 300`} >
            <Rect
              x={tooltipPos.x   180}
              y={tooltipPos.y   50}
              width="70"
              height="70"
              fill="red"
              stroke="red"
            />
            <TextInput
              x={tooltipPos.x - 15}
              y={tooltipPos.y   15}
              style={{
                backgroundColor: "white",
                top: tooltipPos.y   40,
                left: tooltipPos.x,
                position: "absolute",
                elevation: 1,
              }}
              placeholderTextColor="red"
              placeholder={tooltipPos.value.toString()}
              textAlign={"center"}
              onChangeText={(text) => setDecoratorText(text)}
              value={decoratorText}
              autoFocus={true}
              selectTextOnFocus={true}
              clearTextOnFocus={true}
            />
          </Svg>
        </>
      )
    } else {
      return null
    }