El objetivo: crear un componente de reacción reutilizable y tener la flexibilidad de diseñar cualquier parte del componente en el futuro.

Cómo lograr esto:

1. Cree el componente reutilizable usando const o function.
2. Pase 'props' como parámetro al componente, ya sea funcional o const.
3. Proporcione los estilos de los elementos de sus componentes reutilizables que son matrices del estilo predeterminado y "props.futureStyle". Tenga en cuenta que "futureStyle" aquí es solo un nombre y puede usar cualquier nombre que desee.
4. Siempre que llame al componente reutilizable, puede usar fácilmente "futureStyle" para realizar cualquier cambio. Tenga en cuenta que puede declarar "futureStyle1", "futureStyle2", etc. a las diferentes partes de los componentes reutilizables para que pueda editar los estilos de cada vista, texto, etc. que forme parte de los componentes dondequiera que se agreguen en el futuro.

Ejemplo: Crear los componentes reutilizables:

 const ReusableButton = (props) =>{ return( <View style={[styles.currentButtonStyle, props.futureButtonStyle]}> <Text style={[styles.currentButtonTitle, props.futureTitleStyle]}>{props.title}</Text> </View> )}; //Here are my default styles: const styles = Stylesheet.create({ currentButtonStyle: { height:50, width: 100, backgrroundColor:'red'}, currentButtonTitle:{ color: 'white' fontSize: 20, }, })

De ahora en adelante, en cualquier lugar al que desee llamar y usar ReusableButton, puede editar los estilos con los estilos futuros. Ejemplo:

 function NewComponent(){ return( <View> <Text>Hi let us make use of our old reusable button</Text> <ReusableButton futureButtonStyle={{width: 200, height: 100, backgroundColor:'blue'}} futureTitleStyle={{fontWeight:'bold', fontSize: 50}}/> </View> ) }