react-native - 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

Button您可以直接使用style道具更改宽度并添加width到它。

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