Colegas, llevo más dos semanas atorado en este problema... Platico, estoy desarrollando una funcionalidad. El chiste es que cuando se haga touch en la pantalla quiero que se dibuje un nuevo círculo con coordenadas aleatorias en la pantalla. Estoy utilizando react-native-svg
para esto, tengo definido el círculo de esta manera:
import React from 'react';
import Svg, { Circle } from 'react-native-svg';
const FCircle = () => {
const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;
const width = 300;
const height = 600;
const randomW = random(0, width);
const randomH = random(0, height);
const radio = 10;
const color = 'green';
return (
<View>
<Circle
cx = {randomW}
cy = {randomH}
r = {radio}
fill={color}
/>
</View>
);
}
export default FCircle;
Así mismo, en mi componente ActivityOne
(Abajo descrito), importo el componente FCircle
de tal manera que en la función updateCircles
se crea un nuevo círculo con nuevas coordenadas y lo agrego al arreglo de circles
, que se encuentra seteado por el hook de useState
. Los circles
son recorridos por el map para dibujar en el canvas. En diversas pruebas, me doy cuenta que si agrega el nuevo círculo al arreglo, pero este no se refleja dibujado en la pantalla.
Acerca de este problema, estuve investigando y me doy una idea de que puede ser por la manera síncrona que funciona useState pero no he podido resolverlo. Agrego la implementación que tengo.
// Components
import FCircle from '../../components/Figures/FCircle';
const ActivityOne = ({navigation}) => {
const circle1 = new FCircle();
const figures = [
circle1
];
const [ circles, setCircles ] = useState(figures);
const updateCircles = () => {
circles.push(new FCircle());
setCircles(circles);
};
let renderCanvas = () => {
return (
<Svg onPress={ () => {updateCircles()} }>
{circles.map(c => c)}
</Svg>
);
};
return (
<SafeAreaView>
<ScrollView style={{
paddingHorizontal: 20,
}}>
<View style={ styles.canvas } >
{renderCanvas()}
</View>
</ScrollView>
</SafeAreaView>
);
};
He intentado varias maneras de implementarlo pero ninguna me ha funcionado hasta el momento. Creo que con el hook useEffect
podría tener un resultado esperado ¿Podrían orientarme un poco?
react-native-svg
intenté instanciar objetos sin elView
tag pero sigue sin mostrar las nuevas instancias después de renderizar. (Además de que sin elView
me encuentro con el problema de los width y heigth) Sigo pensando que es posible realizarlo con este paquete.