Блог

Главная - Вопросы по программированию - Я хотел бы знать, как я могу скрыть значок компонента CustomButton в React Native? Я новичок, чтобы реагировать на родной язык

Я хотел бы знать, как я могу скрыть значок компонента CustomButton в React Native? Я новичок, чтобы реагировать на родной язык

#javascript #reactjs #react-native

Вопрос:

Это в основном я использую свой компонент в файле 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, значение будет ложным…..Я могу видеть ? на кнопке вместо значка.

Ответ №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 amp;amp; (
        <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'}
  }}
/>;

Ответ №2:

Измените свой CustomButton на

 <TouchableOpacity
  onPress={props.onPress}
  style={[
    props.disabled
      ? { ...styles.buttonStyle, backgroundColor: 'grey' }
      : styles.buttonStyle,
    props.buttonStyle,
  ]}
  disabled={props.disabled}>
  {props.useIcon amp;amp; (
    <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 , я бы предложил вам проверить это на основе этого.

Метки: , ,