Пользовательская кнопка Компонент в React Native не принимает реквизиты - PullRequest
Новая
       60

Пользовательская кнопка Компонент в React Native не принимает реквизиты

0 голосов
/ 27 января 2019

Я создал пользовательскую кнопку (компонент) в реагирующем нативе, чтобы использовать ее во всем приложении с необходимыми параметрическими значениями (цвет, заголовок, функция onPress и т. Д.), Но она не принимает значения, я передаю вызов

вот мой класс кнопок 

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

здесь я использую его 

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

}}

вот вам поставил

вымогу видеть, что мои параметрические значения, цвет, ширина, высота и т. д. не влияют на кнопку

Ответы [ 3 ]

0 голосов
/ 27 января 2019

Проблема заключается в том, что вы в основном создали оболочку для компонента Button из react-native

https://facebook.github.io/react-native/docs/button

Если вы посмотрите на документацию для кнопки, там есть только7 реквизитов, которые вы можете использовать https://facebook.github.io/react-native/docs/button#props

  • onPress
  • title
  • accessibilityLabel
  • color
  • отключено
  • testID
  • hasTVPreferredFocus

Нет style проп.То, что вы проходите, просто игнорируется.

Что вам нужно сделать в CustomButton, это использовать один из Touchables https://facebook.github.io/react-native/docs/handling-touches#touchables

Таким образом, ваш компонент может стать чем-то вроде этого (вам может понадобитьсядля настройки стиля и т. д.): 

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

Также значения, которые необходимо передать для width и height, должны быть числами.

Вот закуска с нимрабочая https://snack.expo.io/@andypandy/custom-button-example

0 голосов
/ 27 января 2019

здесь я сделал некоторые изменения в вашем коде. 

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

И используйте это так, определенно это решит вашу проблему. 

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

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

и не используйте ()в
btnPress={this._LoginFunction()}

просто используйте его как
btnPress={this._LoginFunction}

0 голосов
/ 27 января 2019

Используйте функцию стрелки таким образом

См. Разность 

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()}
/>
...