react-native - React Native Button：适合文本布局

Question

在来自 React-Native 的 Button 文档中，它显示了一张图片，上面写着：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 。