react-native-paper 中的按钮宽度答案

【问题标题】：Button width in react-native-paperreact-native-paper 中的按钮宽度
【发布时间】：2020-07-04 04:35:30
【问题描述】：

我开始学习 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
    }
})

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

【问题讨论】：

标签： react-native react-native-paper

【解决方案1】：

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

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

【讨论】：

感谢它的工作，但是“contentStyle”有什么用
MaterialBottomTab 不支持 contentStyle。甚至 React-native-paper 和 react-navigation 的文档也没有提到 contentStyle
我不喜欢这种方法。应该有更好的方法，应该由 react-native-paper 提供。他们显示的图像没有全宽。
看看这个：github.com/callstack/react-native-paper/issues/…
Botton 上的 style 道具实际上不起作用

【解决方案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
      },
    });

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。