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

我在react native中制作了一个自定义按钮（组件），在整个应用程序中使用它，并带有所需的参数值（颜色、标题、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>
);

从“React”导入React；
从“react native”导入{按钮，文本}；
导出常量CustomButton=（{btnTitle，btnBgColor，btnPress}）=>
(
);

我在用它

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

}}

导出类登录扩展组件{
render（）{
返回(
);
}
_LoginFunction（）
{
返回（警报（“登录成功”）
}}

这是出口

---

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

看到差别了吗

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

export const CustomButton=（{btnTitle，textColor，textSize，btnBgColor，btnPress}）=>
({
});

问题是因为您基本上已经从

react native

创建了一个围绕

按钮的包装器


如果你看一下按钮的文档，你只能使用7个道具


onPress
头衔
可访问性标签
颜色
残废
睾丸
hastv首选焦点

没有
样式
道具。所以你所传递的只是被忽略了

您需要在
自定义按钮
中使用一个
可触摸按钮

因此，您的组件可能会变成这样（您可能需要调整样式等）：

从“React”导入React；
从“react native”导入{TouchableOpacity，Text}；
导出常量CustomButton=（{btnTitle，btnBgColor，btnPress}）=>
(
{btnTitle}
);

您需要传递的
宽度
和
高度
值也需要是数字

这里有一个小吃，它正在工作
这里我对您的代码做了一些更改

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

从“React”导入React；
从“react native”导入{TouchableOpacity，Text}；
export const AppButton=（{btnTitle，btnBgColor，textColor，btnTextSize，btnPress，btnPadding}）=>(
{btnTitle}
)

像这样使用它，肯定会解决你的问题

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

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

从“../../components/AppButton”导入{AppButton}；

不要在

btnPress={this.\u LoginFunction（）}

只需将其用作

btnPress={this.\u LoginFunction}
我想我用的是同样的方式谢谢你的回答，但我用的是同样的方式“touchable opacity”，它工作正常
import {AppButton} from "../../components/AppButton";

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