Reactjs - 反応ネイティブ IOS で複数のボトムシートが開かない
みなさん、私は反応ネイティブ プロジェクトで反応ネイティブの生のボトムシートを使用しています。ユーザーがアイコンをクリックするとボトムシートが表示されます。ユーザーがアイコンから要素を選択すると、Android と iOS の両方で正常に動作します。一番下のシート そのシートを閉じて、サブカテゴリとその開口部を含む新しいシートを開こうとしていますが、Android では開きますが、iOS では開きません。iOS で何が問題になっているのかわかりません。これに取り組むのを手伝ってください。 これが私のコードです
最初のボトムシートを開くボタン
<TouchableOpacity
style={{
height: 27,
width: 20,
}}
onPress={() => optionSheet.current.open()}>
<Image
source={more}
style={{height: 17, width: 17, tintColor: 'black'}}
/>
</TouchableOpacity>
最初のボトムシート
<RBSheet
ref={optionSheet}
height={360}
openDuration={250}
customStyles={{
container: {
borderTopRightRadius: 30,
borderTopLeftRadius: 30,
paddingTop: 20,
},
}}>
<TouchableOpacity
onPress={() => {
Snackbar.show({
text: ' Saved to playlist',
duration: Snackbar.LENGTH_LONG,
action: {
text: 'Change',
textColor: 'tomato',
onPress: () => {
handleAction();
optionSheet.current.close();
playListRef.current.open();
},
},
});
}}
style={[styles.horizontalContainer, {marginLeft: 4, padding: 10}]}>
<Text
style={[
styles.large,
{alignSelf: 'center', fontSize: 18, margin: 5},
]}>
Save to playlist
</Text>
</TouchableOpacity>
</RBSheet>
これは、スナックバーのアクション ボタンをクリックすると開く 2 番目のシートです。
<RBSheet
ref={playListRef}
height={420}
openDuration={250}
customStyles={{
container: {
borderTopRightRadius: 30,
borderTopLeftRadius: 30,
paddingTop: 10,
},
}}>
<TouchableOpacity
onPress={() => {
setBilal(!bilal);
}}
style={[styles.horizontalContainer, {marginLeft: 14, padding: 10}]}>
<CheckBox
center
checked={bilal}
checkedColor="red"
onPress={() => {
setNudity(!nudity);
}}
containerStyle={{padding: 0}}
/>
<Text
style={[
styles.large,
{alignSelf: 'center', fontSize: 18, margin: 5},
]}>
Bilal
</Text>
</TouchableOpacity>
<Divider style={styles.dividerStyle} />
<TouchableOpacity
onPress={() => {
setmyFav(!myFav);
}}
style={[styles.horizontalContainer, {marginLeft: 14, padding: 10}]}>
<CheckBox
center
checked={myFav}
checkedColor="red"
onPress={() => {
setmyFav(!myFav);
}}
containerStyle={{padding: 0}}
/>
<Text
style={[
styles.large,
{alignSelf: 'center', fontSize: 18, margin: 5},
]}>
My Favourites
</Text>
</TouchableOpacity>
<Divider style={styles.dividerStyle} />
<TouchableOpacity
onPress={() => {
setDaring(!daring);
}}
style={[styles.horizontalContainer, {marginLeft: 14, padding: 10}]}>
<CheckBox
center
checked={daring}
checkedColor="red"
onPress={() => {
setDaring(!daring);
}}
containerStyle={{padding: 0}}
/>
<Text
style={[
styles.large,
{alignSelf: 'center', fontSize: 18, margin: 5},
]}>
Daring
</Text>
</TouchableOpacity>
<Divider style={styles.dividerStyle} />
<TouchableOpacity
onPress={() => {
setBest(!best);
}}
style={[styles.horizontalContainer, {marginLeft: 14, padding: 10}]}>
<CheckBox
center
checked={best}
checkedColor="red"
onPress={() => {
setBest(!best);
}}
containerStyle={{padding: 0}}
/>
<Text
style={[
styles.large,
{alignSelf: 'center', fontSize: 18, margin: 5},
]}>
Best
</Text>
</TouchableOpacity>
<Divider style={styles.dividerStyle} />
<TouchableOpacity
onPress={() => {
Snackbar.show({
text: 'New playlist added',
});
}}
style={[styles.horizontalContainer, {marginLeft: 14, padding: 10}]}>
<MaterialIcons
name="playlist-add"
size={23}
color={'gray'}
style={{alignSelf: 'center', margin: 5}}
/>
<Text
style={[
styles.large,
{alignSelf: 'center', fontSize: 18, margin: 5},
]}>
Add new playlist
</Text>
</TouchableOpacity>
<Divider style={styles.dividerStyle} />
<TouchableOpacity
style={styles.smallButton}
onPress={() => {
playListRef.current.close();
}}>
<Text
style={[styles.largeText, {color: 'white', alignSelf: 'center'}]}>
Save
</Text>
</TouchableOpacity>
</RBSheet>
スナックバーの変更ボタンをクリックすると、下から 2 番目のシートが iOS では開きませんが、Android では開きません。React の useRef を使用しています。
------------------------
別の RBSheet を開きたい場合は、次のように 2 番目の RBSheet のコードを最初の RBSheet に記述する必要があります。
<RBSheet
ref={optionSheet}
height={360}
openDuration={250}
customStyles={{
container: {
borderTopRightRadius: 30,
borderTopLeftRadius: 30,
paddingTop: 20,
},
}}>
<TouchableOpacity
onPress={() => {
Snackbar.show({
text: ' Saved to playlist',
duration: Snackbar.LENGTH_LONG,
action: {
text: 'Change',
textColor: 'tomato',
onPress: () => {
playListRef.current.open();
},
},
});
}}
style={[styles.horizontalContainer, {marginLeft: 4, padding: 10}]}>
<Text
style={[
styles.large,
{alignSelf: 'center', fontSize: 18, margin: 5},
]}>
Save to playlist
</Text>
</TouchableOpacity>
//Second RBsheet
<RBSheet
ref={playListRef}
height={360}
openDuration={250}
customStyles={{
container: {
borderTopRightRadius: 30,
borderTopLeftRadius: 30,
paddingTop: 20,
},
}}>
</RBSheet>
</RBSheet>
2022 年 4 月 27 日 5:08 に回答
ユーザー17859754ユーザー17859754
------------------------
これは、iOS では現在、react-native-raw-bottom-sheet ライブラリでは不可能です。この問題を見てください。
https://github.com/nysamnang/react-native-raw-bottom-sheet/issues/35
共有 この回答を改善します フォローする2020 年 11 月 24 日 20:32 に回答
イライジャ・ハンプトンイライジャ・ハンプトン
11
1
銅バッジ 1 個
1
1
これで質問の答えになる可能性がありますが、可能であれば、回答自体に提供されているリンクからの最も重要で関連性の高い情報を含めるように回答を編集する必要があります。これにより、リンクが機能しなくなったり、コンテンツが大幅に変更された場合に、回答が無効にならないようにすることができます。
– ホップアップピーナッツ2020 年 11 月 25 日 1:38
新着記事:
Reactjs - コンポーネントから条件付きで props を削除するIntellij で git Push-option を使用する方法はありますか?javascript - ajax postリクエストを実行した後にWebページをリロードするにはどうすればよいですか?node.js - NodeJS でのリクエスト ヘッダーの設定firebase - flutter firestore ロールベースの認証vue.js - NuxtJS 静的に生成された HTML ページは、/index.html を呼び出すときに Javascript をロードしませんReactjs - 1 つの GraphQL API で複数の Cognito ユーザー プールを使用する Aws AmplifyC# - マテリアル デザインのアイコンとテキストを原色に変更するh2o が R で一時ファイルを作成および保存する方法を変更するにはどうすればよいですか?ibm クラウド - Python および IBM Watson SDK: ImportError: ibm_watson という名前のモジュールがありませんJavaScript - ReactJs + Electron でアロー関数を使用できません: 予期しないトークンJavaScript - Babel スタンドアロンを Flow で使用するにはどうすればよいですか