Кнопка React Native: подходит для размещения текста

Question

В документации по кнопкам из React-Native здесь показано изображение, которое гласит: Fit to text layout.Это то, что я ищу, потому что моя кнопка всегда имеет полную ширину, но я хочу, чтобы она была такой же широкой, как и текст.Но ни в документах, ни в коде кнопки здесь я не могу найти что-то связанное с этим реквизитом или как его достичь.У кого-нибудь есть идеи, как его получить?

Answer 1

Я предлагаю сделать свою собственную кнопку с TouchableOpacity и Text.

Например, это мой компонент, который я часто использую:

export default class RoundedButton extends React.Component<Props>{

  render(){
    const defStyles : StyleProp<ViewStyle> = [style.button, {
      backgroundColor: this.props.backgroundColor,
    }, this.props.style];
    if(this.props.shadow)
      defStyles.push(style.shadow);


    return(
      <TouchableOpacity
        disabled={!this.props.onPress}
        onPress={() => {
          if(this.props.onPress)
            this.props.onPress();
        }}
        style={defStyles}
      >
        <Text style={{
          color: this.props.textColor,
          fontFamily: fonts.bold,
          fontSize: 16
        }}>{this.props.centerText}</Text>

      </TouchableOpacity>
    );
  }

}

Вы можете найти полную суть здесь, если хотите:https://gist.github.com/Sangrene/176c1b87ad5b355e26b5c6aa80b96eae.