React Native 中的自定义按钮组件不接受道具

Question

我在 React Native 中制作了一个自定义按钮（组件），以便在整个应用程序中使用它并具有所需的参数值（颜色、标题、onPress 功能等），但它不接受这些值，我正在继续调用

这是我的按钮 class

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

}}

这是出场

你可以看到我的参数值、颜色、宽度、高度等对按钮没有影响

Answer 1

像这样使用箭头函数

看出区别

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

Answer 2

问题是因为您基本上已经围绕 react-native

的 Button 组件创建了一个包装器

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

如果你查看按钮的文档，你会发现只有 7 个道具可以使用 https://facebook.github.io/react-native/docs/button#props

onPress

title

accessibilityLabel

color

disabled

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

Answer 3

这里我对你的代码做了一些修改。

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}

React Native 中的自定义按钮组件不接受道具

Custom button Component in React Native is not accepting props

javascript

android

react-native

react-props