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 标签，并在其中调用 styles 属性。

    <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
      },
    });

react-native-paper 中的按钮宽度

Button width in react-native-paper

react-native

react-native-paper