【发布时间】：2020-12-22 14:10:36
【问题描述】：
大家好，我在 react native 项目中使用 react native raw bottom sheet。当用户单击图标时，我会显示一个底部工作表。它在 android 和 ios 上都可以正常工作，当他从底部工作表中选择一个元素我正在尝试关闭该工作表并打开一个全新的工作表，其中 subcategories 及其在 android 上而不是在 ios 上的打开，我不'不知道ios有什么问题，请帮我解决这个问题。
这是我的代码
用于打开第一个 BottomSheet 的按钮
<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>
这是我点击 Snackbar 操作按钮时打开的第二张工作表
<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>
点击 Snackbar 中的 Change 按钮后，第二个底页未在 android 上打开 ios 对接打开，我使用的是 useRef from React
【问题讨论】：
标签： reactjs react-native react-native-android react-native-ios