#react-native-svg #react-native-textinput #react-native-chart-kit
Вопрос:
Я использую набор диаграмм 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
}