🌀
【React Native】Buttonのwidthとheightを指定したい
概要
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