在React-Native here的按钮文档中，它显示了一张图像，内容如下：Fit to text layout。这就是我正在寻找的，因为我的按钮总是有全宽，但我希望它只有一样宽的文本。但无论是在文档中，还是在按钮代码here，我可以找到一些相关的东西，一个 prop 或它如何实现。有人有一个想法如何得到它？
Fit to text layout
bqjvbblv1#
我建议用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.
wmtdaxz32#
可以在文本组件中传递prop adjustsFontSizeToFit={true}。如果你在文本的样式中添加一个fontSize，它将覆盖这个属性，并且不起作用。示例
adjustsFontSizeToFit={true}
<View style={{widht: 100, height: 60}}> <Text adjustsFontSizeToFit={true}> Your Text Here </Text> </View>
2条答案
按热度按时间bqjvbblv1#
我建议用TouchableOpacity和Text制作自己的按钮。
例如，这是我经常使用的组件：
如果你愿意，可以在这里找到完整的要点：https://gist.github.com/Sangrene/176c1b87ad5b355e26b5c6aa80b96eae.
wmtdaxz32#
可以在文本组件中传递prop
adjustsFontSizeToFit={true}。如果你在文本的样式中添加一个fontSize，它将覆盖这个属性，并且不起作用。
示例