react-native-paper中的按钮宽度

Question

我开始学习react-native-paper，我不确定如何固定按钮宽度，目前它填满了整个父容器。

    <View>
        <Button 
        icon="camera" 
        mode="contained" 
        onPress={() => console.log('Pressed')}
        contentStyle={styles.btn}
        >
            Press me
        </Button>
    </View>



const styles = StyleSheet.create({
    btn: {
        width: 30
    }
})

这不起作用，按钮仍然是全宽的。我需要一些帮助。

Answer 1

您可以使用style属性并向其添加width来直接更改Button的宽度。

<Button 
   icon="camera" 
   mode="contained" 
   onPress={() => console.log('Pressed')}
   style={{ width: 100 }}
>
  Press me
</Button>

Answer 2

如果你的View标签是一个按钮的容器，那么这个按钮需要它自己的View标签和样式prop。

    <View>
      <View style={styles.btn}>
       <Button 
          icon="camera" 
          mode="contained" 
          onPress={() => console.log('Pressed')}
       >
        Press me
       </Button>
      </View>
    </View>



    const styles = StyleSheet.create({
      btn: {
        width: 30
      },
    });