React Native Button：适合文本布局答案

【问题标题】：React Native Button: Fit to text layoutReact Native Button：适合文本布局
【发布时间】：2019-04-28 07:32:30
【问题描述】：

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

【问题讨论】：

您最好创建自己的按钮组件来满足您的需求。这样您就可以完全控制。
是的，我知道。但我只想要一个非常快速的解决方案，因为 react-native 直接提供了这个，并且想知道如何获得该选项，因为文档显示了它。也许其他人已经发现了如何获得该设置...
我不认为这是文档所说的。我认为他们是说您可以使用 布局策略 让按钮适合文本。对于我来说，这意味着将按钮包装在具有 flexDirection 行的视图中，可能将 justifyContent 设置为 space-between。这样做应该重新创建文档中的示例。

标签： react-native react-native-button

【解决方案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。

【讨论】：