En mi ejemplo, estoy tratando de crear un componente llamado nextButton a partir del siguiente código y luego puedo usarlo. ¿Dónde está el problema con lo que hice?
export const MainScreen = () => { const nextButton =() => { return ( <TouchableOpacity style={{ alignSelf: 'center' }} onPress={() => verifyNavigate()} > <LinearGradient colors={[Colors.Grayish_blue, Colors.Oval_blue, Colors.Dark_blue]} style={styles.linearGradientStyle} > <Text style={styles.nextText}>next</Text> </LinearGradient> </TouchableOpacity> ) } return ( <nextButton /> ) }Su versión de nextButton es solo una función y no un componente. No puede crear un componente dentro de un componente, pero puede crear varios componentes en un solo archivo.
puede llamarlo como función en su declaración de MainScreen
{nextButton()}
Si desea usarlo como un componente, debe moverlo fuera del cuerpo del componente MainScreen
export const NextButton = () => { return ( <TouchableOpacity style={{ alignSelf: "center" }} onPress={() => verifyNavigate()} > <LinearGradient colors={[Colors.Grayish_blue, Colors.Oval_blue, Colors.Dark_blue]} style={styles.linearGradientStyle} > <Text style={styles.nextText}>next</Text> </LinearGradient> </TouchableOpacity> ); }; export const MainScreen = () => { return <NextButton /> }; Y recuerde que la mejor práctica es usar un nombre de componente que comience con una letra mayúscula, así que cambie el nombre de nextButton con NextButton .
Si esto funciona para usted, por favor vote la respuesta