callstack / callstack/react-native-paper

Multiline text in SegmentedButtonItem

オープン
#4,452 コメント 1 件 リアクション 2 件 担当者 0 名 GitHub で見る
主要言語
TypeScript
スター
14.5k
フォーク
2.2k
平均マージ
5日 23時間
マージ済み PR(30日)
12

説明

Hi! 👋

Firstly, thanks for your work on this project! 🙂
Today I used [patch-package](https://github.com/ds300/patch-package) to patch `react-native-paper@5.12.3` for the project I'm working on.

I needed multiline text in `SegmentedButtonItem`. So i removed `numberOfLines` and vertically centered `TouchableRipple`'s content. Would be nice to have option to change those props in next versions.

Here is the diff that solved my problem:

```diff
diff --git a/node_modules/react-native-paper/src/components/SegmentedButtons/SegmentedButtonItem.tsx b/node_modules/react-native-paper/src/components/SegmentedButtons/SegmentedButtonItem.tsx
index d88f2a4..600859e 100644
--- a/node_modules/react-native-paper/src/components/SegmentedButtons/SegmentedButtonItem.tsx
+++ b/node_modules/react-native-paper/src/components/SegmentedButtons/SegmentedButtonItem.tsx
@@ -214,7 +214,10 @@ const SegmentedButtonItem = ({
disabled={disabled}
rippleColor={rippleColor}
testID={testID}
- style={rippleStyle}
+ style={[rippleStyle, {
+ flex: 1,
+ justifyContent: 'center'
+ }]}
background={background}
theme={theme}
>
@@ -236,7 +239,6 @@ const SegmentedButtonItem = ({
variant="labelLarge"
style={[styles.label, labelTextStyle, labelStyle]}
selectable={false}
- numberOfLines={1}
maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
testID={`${testID}-label`}
>
```

This issue body was [partially generated by patch-package](https://github.com/ds300/patch-package/issues/296).

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

src/components/SegmentedButtons/SegmentedButtonItem.tsx から始め、報告されたパッチを現在のコンポーネントの props とレイアウトと比較します。SegmentedButtonItem が複数行のラベルをサポートし、関連するテキストおよび TouchableRipple の props のオプションを公開すれば、作業は完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
react-native, typescript
領域
mobile
issue の種類
機能追加
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。