Quiero renderizar entre mostrar un botón de inicio y detener basado en presionar los botones. Eso significa que si se presiona el botón de inicio, se debe mostrar el botón de parada y viceversa. En el caso estándar, se debe representar el botón de parada. Con el siguiente código, aparece un error porque el status solo se puede leer, por lo que necesito otra forma de establecer el estado.
const SampleComponent = () => { const startButton = () => { return <Component1 />; }; const stopButton = () => { return <Component2 />; }; const status = stopButton; return ( <View> <Pressable onPress={() => { if (status == stopButton) { status = startButton; } else { status = stopButton; } }} > {status} </Pressable> </View> ); }; export default SampleComponent;Necesito una forma de React Native para hacer esto. Traté de estudiar los documentos y también otro material, pero simplemente no lo entiendo.
La forma de reaccionar de hacer esto sería usar el gancho de estado . Puede usar una variable de estado booleana y alternarla al hacer clic en el botón.
Solución
const SampleComponent = () => { const StartButton = () => { return <Component1 />; }; const StopButton = () => { return <Component2 />; }; const [status, setStatus] = useState(false); return ( <View> <Pressable onPress={() => { setStatus(!status); }} > {status ? <StopButton /> : <StartButton />} </Pressable> </View> ); }; export default SampleComponent;Recuerde escribir los componentes en mayúsculas.