這基本上是我在App.tsx檔案中使用我的組件
。<CustomButton
title={'Login'/span>}
buttonStyle={{ marginTop: 20, alignSelf: 'center' }}}。
disabled={！props.isValid}。
useIcon={true}。
iconName={'vpn-key'/span>}
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 介面 Props {
title: string;
disabled? : boolean;
buttonStyle? ViewStyle | ViewStyle[] 。
textStyle? TextStyle | TextStyle[];
onPress: any;
useIcon: boolean;
iconName?:字串。
iconSize?:數字
iconColor?:字串。
}
const CustomButton = (props: Props) => {
return (
<TouchableOpacity>
onPress={props.onPress}。
style={[]
props.disabled?
? { ...style.buttonStyle, backgroundColor: 'grey' }
: styles.buttonStyle,
props.buttonStyle,
]}
disabled={props.disabled}>
<Icon
name={props.iconName}。
useIcon={props.useIcon}。
size={props.iconSize}>
color={props.iconColor}>/span></Icon>/span>
<Text style={{style. textStyle, props.textStyle]}>{props.title}</Text>/span>
</TouchableOpacity>
);
};
我想用這個組件在我的App.tsx檔案中創建另一個按鈕，但希望這個按鈕沒有圖示。如果我提供UseIcon，其值為false.....，我可以在按鈕上看到一個?
uj5u.com熱心網友回復：
像這樣修改組件代碼
const CustomButton=（props: Props）=> {
return (
<TouchableOpacity>
onPress={props.onPress}。
style={[]
props.disabled?
? { ...style.buttonStyle, backgroundColor: 'grey' }
: styles.buttonStyle,
props.buttonStyle,
]}
disabled={props.disabled}>。
{/*這里 */}
{iconName&& (
<Icon[/span
name={props.iconName}。
useIcon={props.useIcon}。
size={props.iconSize}>
color={props.iconColor}></Icon>/span>
)}
<Text style={{style. textStyle, props.textStyle]}>{props.title}</Text>/span>
</TouchableOpacity>
);
};
和用法
//不帶圖示。
<CustomButton。
title={'Login'/span>}
buttonStyle={{ marginTop: 20, alignSelf: 'center' }}}。
disabled={！props.isValid}。
useIcon={true}。
/>。
//帶圖示
<CustomButton。
title={'Login'}。
buttonStyle={{ marginTop: 20, alignSelf: 'center' }}>
disabled={! props.isValid}
useIcon={true}
iconName={'vpn-key'}。
iconSize={25}。
iconColor={'white'}。
}}
/>。
uj5u.com熱心網友回復：
把你的CustomButton改成
<TouchableOpacity
onPress={props.onPress}。
style={[
props.disabled?
? { ...style.buttonStyle, backgroundColor: '灰色' }
: styles.buttonStyle,
props.buttonStyle。
]}
disabled={props.disabled}>
{props.useIcon&& (
< Icon
name={props.iconName}。
useIcon={props.useIcon}。
size={props.iconSize}>
color={props.iconColor}
/>
)}
<Text style={[style.textStyle, props. textStyle]}>{props.title}</Text>
</TouchableOpacity>。
那么你的useIcon = {false}將正常作業。由于useIcon是一個必要的props，我建議你在此基礎上進行驗證。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/334284.html
標籤：
上一篇：如何在reactJs中導航
下一篇：Ruby通過相同的鍵來比較哈希值