🌀

【React Native】Buttonのwidthとheightを指定したい

2022/05/29に公開

概要

React NativeではButtonのコンポーネントが用意されていますが、ボタンのwidthとheightを指定するプロパティがありません。styleで設定してボタンに適用しても反映されません。
どうすればButtonのwidthとheightを指定できるか、メモ書きします。

対応方法

まずwidthについてはHow To Customize Button In React Nativeの記事にある通り、親にViewのコンポーネントを挟んで、そのViewにwidthを設定すればいけました。
heightについてはHow to set the height of button in React Native Androidのstackoverflowの回答の通り、設定ができないようです。代替案としてTouchableOpacityのコンポーネントを使う方法が、挙げられています。

実装サンプル

widthについて、固定で大きさを設定する実装サンプルは以下の通りです。

export default function SampleComponent() {
  return (
    <View style={styles.sampleButton}>
      <Button title="テスト" />
    </View>
  );
}

const styles = StyleSheet.create({
  sampleButton: {
    marginVertical: 20,
    width: 250,
  },
});

Discussion