J'ai créé un bouton (composant) personnalisé en React natif 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 passe d'appeler

Voici ma classe de bouton

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>
);

Ici je l'utilise

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'))

}}

Voici les résultats

Vous pouvez voir mes valeurs paramétriques, couleur, largeur, hauteur, etc. sans effet sur le bouton

2
Haseeb Warriach 27 janv. 2019 à 22:10

3 réponses

Meilleure réponse

Ici j'ai fait quelques changements dans votre code.

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 utilisez-le comme ça, cela résoudra certainement votre problème.

import {AppButton} from "../../components/AppButton";

                <AppButton
                    btnBgColor={'#2abec7'}
                    btnPadding={10}
                    btnPress={this._LoginFunction}
                    btnTextSize={18}
                    btnTitle={'list'}
                    textColor={'#000'}
                />

Et n'utilisez pas () sur
btnPress={this._LoginFunction()}

Utilisez-le simplement comme
btnPress={this._LoginFunction}

1
Asmat ullah 27 janv. 2019 à 19:53

Utilisez la fonction flèche comme celle-ci

Regarde la différence

export const CustomButton = ({btnTitle, textColor, textSize, btnBgColor, btnPress}) =>
({
  <Button
    title={btnTitle}
    style={{
       width:'200',
       height:'40',
       padding:10,
       marginTop:20,
       backgroundColor:{btnBgColor},
    }}
    onPress = {btnPress}>
  </Button>
});

<CustomButton
   btnTitle='login' 
   btnBgColor='black'
   btnPress={this._LoginFunction()}
/>
1
Mahdi NBA 9 mars 2019 à 04:55

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 du bouton, il n'y a que 7 accessoires que vous pouvez utiliser https://facebook.github.io/react-native/docs/button# accessoires

  • onPress
  • titre
  • accessLabel
  • couleur
  • désactivé
  • testID
  • hasTVPreferredFocus

Il n'y a pas d'accessoire style. Donc ce que vous passez est simplement ignoré.

Ce que vous devez faire dans votre CustomButton, utilisez 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 les width et height doivent également être des nombres.

Voici une collation qui fonctionne https://snack.expo.io/@andypandy / Exemple de bouton personnalisé

2
Andrew 27 janv. 2019 à 19:59