做出反应原因的响应按钮

Question

I want to make button in react native with dynamic width. I just want to supply text in button component it create button according to text width.

Answer 1

<View style={{justifyContent: 'center', alignItems: 'center'}}>
    <TouchableHighlight style={{backgroundColor:'red', paddingTop:10, paddingLeft:20, paddingRight:20, paddingBottom:10}}>
        <Text style={{color:'white', fontWeight:'bold'}}>BUTTON 2</Text>
    </TouchableHighlight>
</View>

Answer 2

To accomplish this, use padding. I've set up an example here .

<TouchableHighlight style={{backgroundColor:'red', paddingTop:10, paddingLeft:20, paddingRight:20, paddingBottom:10}}>
    <Text style={{color:'white', fontWeight:'bold'}}>BUTTON 2</Text>
</TouchableHighlight>

https://rnplay.org/apps/Hwinnw