0

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?

6
  • los componente de svg solo funcionan dentro de un svg y View no funcion en el svg al menos que este dentro de un foreignObject componente de svg, Intenta solo reternar el Circle sin el view y creo que funcionará.
    – OsAndNoTi
    Commented el 4 may. 2021 a las 18:23
  • Tambien puedes hacerlo con esto: npmjs.com/package/react-native-drawableview usa path has un circulo con el path es facil .cada circulo sea una vista y modificas con absolute su left y top para posicionar
    – OsAndNoTi
    Commented el 5 may. 2021 a las 1:52
  • Intenté utilizar el paquete recomendado pero tiene fallas al tratar de instanciar un objeto del DrawableView Commented el 9 may. 2021 a las 18:14
  • Así mismo, con el paquete react-native-svg intenté instanciar objetos sin el View tag pero sigue sin mostrar las nuevas instancias después de renderizar. (Además de que sin el View me encuentro con el problema de los width y heigth) Sigo pensando que es posible realizarlo con este paquete. Commented el 9 may. 2021 a las 18:17
  • intenta en el svg cambiar el viewbox o algo para que se redibuje de nuevo. por ej: 200 de tamaño a 199 y viceversa, aunque deberia actualizarse igual me es raro. Debe ser tu componente fcircle has tu calculacion con usememo , hacerlo directo puede que no llege al renderizado los datos del circulo.
    – OsAndNoTi
    Commented el 9 may. 2021 a las 22:08

1 respuesta 1

0

Después de muchas horas de intentarlo y frustación, lo he solucionado de la siguiente manera.

Dejé el componente FCircle como el siguiente:

import React from 'react';
import { Circle } from 'react-native-svg';
import { v4 as uuidv4 } from 'uuid';


const FCircle = (props) => {
  const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;
  const width = 300;
  const height = 600;
  const radio = props.r;
  const color = props.color;

  return (
    <Circle
      key={uuidv4()}
      cx = {random(0, width) + radio/2}
      cy = {random(0, height) + radio/2}
      r = {radio}
      fill={color}
    />
  );
}

export default FCircle;

El uuid sólo sirve para que no marque un warning .

El componente principal cambió la implementación que renderiza quedando de la siguiente manera:

// Components
import FCircle from '../../components/Figures/FCircle';
const width = SIZES.width - 40;
const height = SIZES.height - 40;
const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;
const r = 12;

export class ActivityOne extends Component {
  constructor(props) {
    super(props);

    this.state = {
      circles: [
        <FCircle color='green' r={10} />
      ]
    }
  };

  addCircles = () => {
    const circle = <FCircle color='blue' r={9} />;

    this.setState({
      circles: [...this.state.circles, circle]
    });
  };

  render() {
    let circlesToRender = this.state.circles.map((item) => item);

    return (
      <SafeAreaView>
        <ScrollView style={{ paddingHorizontal: 20 }}>
          <View style={styles.canvas}>
            <Svg onPress={() => this.addCircles()}>
              {circlesToRender}
            </Svg>
          </View>
        </ScrollView>
      </SafeAreaView>
    );
  }
}

Se dejó mi componente FCircle dinámico para crearlo con las características que se seteen en el momento. Al final construí el ActivityOne sin utilizar ES6, con arrow functions, se exporta la clase y se agrega un constructor con el state deseado. Dicho state incluye el componente necesario para renderizar. Aún me falta mucho por entender y saber porque no funcionó mi primera implementación.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.