我在 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>
);
我在这里使用它
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'))
}}
你可以看到我的参数值,颜色,宽度,高度等对按钮没有影响
最佳答案
这里我对你的代码做了一些修改。
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}
关于javascript - React Native 中的自定义按钮组件不接受 Prop ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54391895/