react-native - react native 按钮 : Fit to text layout

Question

在 React-Native 的 Button 文档中 here它显示一张图片，上面写着:Fit to text layout。这就是我要搜索的内容，因为我的按钮始终具有全宽，但我希望它仅与文本一样宽。但既不在文档中也不在按钮代码中 here我可以找到与 Prop 相关的东西或它如何实现。有人知道如何获得它吗？

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 .