Question

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

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。

React Native Button：适合文本布局

1 个答案: