[英]React native react-native-paper button with greater height
I'm using react-native-paper
, I would like to make a button with bigger dimensions than normal, as seen in the gif.我正在使用
react-native-paper
,我想制作一个比正常尺寸更大的按钮,如 gif 所示。
I've tried using both height
and padding
, but both don't work properly.我试过同时使用
height
和padding
,但两者都不能正常工作。
What you see in the gif is the example with padding.您在 gif 中看到的是带有填充的示例。
only way to click is in the center, in other places the event does not happen.单击的唯一方法是在中心,在其他地方不会发生事件。
Can you give me a hand?你能帮我个忙吗?
<Button
mode="contained"
labelStyle={{ color: Colors.white }}
style={{ padding: 30 }}
onPress={() => console.log('Pressed')}>
Start
</Button>
you can create a touchablehighlight view around the button and call the same onPress function.您可以在按钮周围创建一个可触摸的高亮视图并调用相同的 onPress function。 something like this:
像这样的东西:
<TouchableHighlight onPress={() => console.log('Pressed')}>
<View
style={{
height: 70,
width: 110,
borderRadius: 5,
backgroundColor: 'blue',
alignItems: 'center',
justifyContent: 'center',
}}>
<Button
mode="contained"
labelStyle={{ color: 'blue' }}
onPress={() => console.log('Pressed')}>
Start
</Button>
</View>
</TouchableHighlight>
YOU CAN USE您可以使用
contentStyle
EXAMPLE例子
<Button
onPress={() => {}}
style={styles.completeFormButton}
styleText={styles.completeFormButtonText}
contentStyle={{ // <--- HERE-----
paddingVertical: 10,
}}
preset="outlined"
/>
react-native-papper
has these three props to pass styles react-native-papper
有这三个 props 可以通过 styles
contentStyle Type: StyleProp Style of button's inner content. contentStyle类型:StyleProp 按钮内部内容的样式。 Use this prop to apply custom height and width and to set the icon on the right with flexDirection: 'row-reverse'.
使用此道具应用自定义高度和宽度,并使用 flexDirection: 'row-reverse' 设置右侧的图标。
style Type: StyleProp样式类型:StyleProp
labelStyle Type: StyleProp Style for the button text. labelStyle类型:StyleProp 按钮文本的样式。
View documentation react native paper 查看文档 react native paper
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.