J'ai créé un bouton personnalisé (composant) dans react native pour l'utiliser dans toute l'application avec les valeurs paramétriques requises (couleur, titre, fonction onPress, etc.) mais il n'accepte pas les valeurs, je transmets l'appel voici ma classe de boutons
export class Login extends Component<Props> {
render() {
return(
<View style={styles.containerStyle}>
<ImageBackground source={require ('./../../assets/images/bg.jpg')}
style={styles.bgStyle}/>
<View style={styles.loginAreaViewStyle}>
<Image />
<CustomInputField
inputPlaceholder={'Email'}
userChoice_TrF={false}
/>
<CustomInputField
inputPlaceholder={'Password'}
userChoice_TrF={true}
/>
<CustomButton
btnTitle={'Login'}
btnBgColor={'black'}
btnPress={this._LoginFunction()}/>
</View>
</View>
);
}
_LoginFunction()
{
return(alert('Login successful'))
}}
ici je l'utilise
import React from 'react';
import {Button,Text} from 'react-native';
export const CustomButton = ({btnTitle, btnBgColor,btnPress}) =>
(
<Button
title={btnTitle}
style={
{
width:'200',
height:'40',
padding:10,
marginTop:20,
backgroundColor:'btnBgColor',
}}
onPress = {btnPress}>
</Button>
);
voici outn put 
a >
vous pouvez voir mes valeurs paramétriques, la couleur, la largeur, la hauteur, etc. n'ont aucun effet sur le bouton
3 Réponses :
Utilisez la fonction fléchée comme celle-ci Voyez la différence XXX
Je pense que j'utilise de la même manière
Le problème est que vous avez essentiellement créé un wrapper autour du composant Button à partir de react-native
https://facebook.github.io/react-native/docs/button
Si vous regardez la documentation pour le bouton il n'y a que 7 accessoires que vous pouvez utiliser https://facebook.github.io/react-native/docs/button# accessoires
- onPress
- titre
- étiquette d'accessibilité
- couleur
- désactivé
- testID
- hasTVPreferredFocus
Il n'y a pas d'accessoire de style . Donc, ce que vous passez est simplement ignoré.
Ce que vous devez faire dans votre CustomButton est d'utiliser l'un des Touchables
https://facebook.github.io/react-native/docs/ manipulation-touches # touchables
Donc, votre composant pourrait devenir quelque chose comme ça (vous devrez peut-être ajuster le style, etc.):
import React from 'react';
import {TouchableOpacity,Text} from 'react-native';
export const CustomButton = ({btnTitle, btnBgColor,btnPress}) =>
(
<TouchableOpacity
style={{
width:200,
height:40,
padding:10,
marginTop:20,
backgroundColor:{btnBgColor},
}}
onPress = {btnPress}>
<Text>{btnTitle}</Text>
</TouchableOpacity>
);
Les valeurs que vous devez transmettre pour la largeur et la hauteur doivent également être des nombres.
Voici une collation qui fonctionne https://snack.expo.io/@andypandy/custom-button-example a >
merci d'avoir répondu, mais de la même manière que j'ai utilisé avec `` opacité tactile '' où cela fonctionnait bien
ici, j'ai apporté quelques modifications à votre code.
import {AppButton} from "../../components/AppButton";
<AppButton
btnBgColor={'#2abec7'}
btnPadding={10}
btnPress={this._LoginFunction}
btnTextSize={18}
btnTitle={'list'}
textColor={'#000'}
/>
Et utilisez-le comme ceci, cela résoudra certainement votre problème.
import React from "react";
import {TouchableOpacity,Text} from 'react-native';
export const AppButton = ({btnTitle, btnBgColor, textColor, btnTextSize, btnPress, btnPadding})=>(
<TouchableOpacity style={{backgroundColor:btnBgColor }} onPress={btnPress}>
<Text style={{color:textColor, fontSize:btnTextSize, padding: btnPadding}}>
{btnTitle}
</Text>
</TouchableOpacity>
)
et n'utilisez pas () sur
btnPress={this._LoginFunction()}
utilisez-le simplement comme
btnPress={this._LoginFunction}