我想知道如何在React Native中隐藏我的CustomButton组件的图标?我是react Native的新手.

Question

这基本上是我在App.tsx文件中使用我的组件

<CustomButton
title={'Login'}
buttonStyle={{ marginTop: 20, alignSelf: 'center' }}
disabled={!props.isValid}
useIcon={true}
iconName={'vpn-key'}
iconSize={25}
iconColor={'white'}
onPress={() => {
if (props.isValid) {
console.log('is valid');
return props.handleSubmit();
} else {
console.log('form is not valid', props.errors);
}
}}
/>

CustomButton组件代码

export interface Props {
title: string;
disabled?: boolean;
buttonStyle?: ViewStyle | ViewStyle[];
textStyle?: TextStyle | TextStyle[];
onPress: any;
useIcon:boolean;
iconName?:string;
iconSize?:number
iconColor?:string;
}

const CustomButton = (props: Props) => {
return (
<TouchableOpacity
onPress={props.onPress}
style={[
props.disabled
? { ...styles.buttonStyle, backgroundColor: 'grey' }
: styles.buttonStyle,
props.buttonStyle,
]}
disabled={props.disabled}>
<Icon
name={props.iconName}
useIcon={props.useIcon}
size={props.iconSize}
color={props.iconColor}></Icon>
<Text style={[styles.textStyle, props.textStyle]}>{props.title}</Text>
</TouchableOpacity>
);
};

我想使用这个组件在我的App.tsx文件中创建另一个按钮，但希望该按钮没有图标。如果我提供UseIcon的值是假.....我能看到一个?在按钮的位置上。

Answer 1

像这样修改组件代码

const CustomButton = (props: Props) => {
return (
<TouchableOpacity
onPress={props.onPress}
style={[
props.disabled
? { ...styles.buttonStyle, backgroundColor: 'grey' }
: styles.buttonStyle,
props.buttonStyle,
]}
disabled={props.disabled}>
{/* Here */}
{iconName && (
<Icon
name={props.iconName}
useIcon={props.useIcon}
size={props.iconSize}
color={props.iconColor}></Icon>
)}
<Text style={[styles.textStyle, props.textStyle]}>{props.title}</Text>
</TouchableOpacity>
);
};

使用和

// without icon
<CustomButton
title={'Login'}
buttonStyle={{ marginTop: 20, alignSelf: 'center' }}
disabled={!props.isValid}
useIcon={true}
/>;
// with icon
<CustomButton
title={'Login'}
buttonStyle={{ marginTop: 20, alignSelf: 'center' }}
disabled={!props.isValid}
useIcon={true}
iconName={'vpn-key'}
iconSize={25}
iconColor={'white'}
}}
/>;

Answer 2

将CustomButton更改为

<TouchableOpacity
onPress={props.onPress}
style={[
props.disabled
? { ...styles.buttonStyle, backgroundColor: 'grey' }
: styles.buttonStyle,
props.buttonStyle,
]}
disabled={props.disabled}>
{props.useIcon && (
<Icon
name={props.iconName}
useIcon={props.useIcon}
size={props.iconSize}
color={props.iconColor}
/>
)}
<Text style={[styles.textStyle, props.textStyle]}>{props.title}</Text>
</TouchableOpacity>

那么你的useIcon = {false}将正常工作。由于useIcon是必需的props，我建议您基于此进行验证。