如何在ReactNative(Expo CLI)中正确停止传播

Question

在这一点上，我有一个模态的问题。这基本上就是这样的想法：

我想打开一个MODAL，让过滤器可用，用户可以使用这个过滤器并找到他们的结果。问题是，每次按下过滤器的按钮或删除任何过滤器时，模态都会关闭。我试过使用

onTouchEnd={(e) => {
e.stopPropagation();
}}

但是不起作用，或者可能我把代码放错了地方。我使用React Native Expo CLI的经验并不多。这里有一个视觉帮助：

视觉过滤器模式

这是父元素代码(MODAL(：

<>
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
setModalVisible(!modalVisible);
}}>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<Text style={styles.modalText}>Hello World!</Text>
<ScrollView
style={styles.filterBoxContainer}>
<Filter data={category} primary={true} text="Select category:" />
<Filter data={cuisine} text="Select cuisine:" />
<Filter data={tags} large={true} text="Select your preferences:" />
<View style={styles.moreFilters}>
<Text style={styles.text} onPress={toggleMoreFilters}>Use {moreFilters ? "less" : "more"} filters
{" "}
<AntDesign name={moreFilters ? "up" : "down"} size={16} color="black" />
</Text>
</View>
{
moreFilters
? <>
<Filter data={mealType} text="Select meal time:" />
<Filter data={district} large={true} text="Select district:" />
</>
: <Text></Text> //?Should close with a Text Component. RN things.
}
</ScrollView>
{
activeFilter.primary !== "" || activeFilter.secondary.length !== 0
? <>
<ActiveBox data={activeFilter} />
<Text style={[styles.text, styles.found]}>{
filteredLocations.length === 1
? '1 location'
: `${filteredLocations.length} locations`
} found matching your {isPremium ? '' : 'FREE '}search </Text>
</>
: <Text></Text>
}
<Pressable
style={[styles.button, styles.buttonClose]}
onPress={() => setModalVisible(!modalVisible)}>
<Text style={styles.textStyle}>Hide Modal</Text>
</Pressable>
</View>
</View>
</Modal>
<Pressable style={[styles.button, styles.buttonOpen]} onPress={() => setModalVisible(true)}>
<Text style={styles.textStyle}>Search</Text>
</Pressable>
</>

这是过滤器代码(对于activeFitler盒子，我会按照你们的建议做(。

<View style={styles.container}>
<Text style={styles.title}>{props.text}</Text>
<FlatList
horizontal
showsHorizontalScrollIndicator={false} //? Ugly bar out!
data={data}
initialScrollIndex={0} //? This allow the menu start in the end.
//? Need more work.
getItemLayout={(data, index) => (
{length: 100, offset: 40 * index, index}
)}
//? "item" is CORE name. 
keyExtractor={item => item}
//? BODY
renderItem={({ item, index }) => {
let isActive = allFilters.includes(item)
return (
<View style={
isActive
? [styles.option, styles.active, { width: props.large ? 100 : 100 }]
: [styles.option, styles.inactive, { width: props.large ? 100 : 100 }]}>
<Text
onPress={() => {
props.primary
? dispatch(locationsAction.togglePrimaryFilter(item))
: dispatch(locationsAction.toggleSecondaryFilter(item))
}}

style={isActive ? [styles.active, styles.textTag] : [styles.inactive, styles.textTag]} key={index}>{item}
</Text>
</View>
)
}}
/>
</View>

Answer 1

很抱歉出现拼写错误的问题。

事实上，我问题的根源是我重新绘制了找到的位置，这就是为什么我的模态一直在关闭的原因。

所以我做了额外的研究，方法是制作一个模拟MODAL的屏幕。

我在这里分享博客--->https://itnext.io/change-react-native-screen-animation-direction-with-react-navigation-8cec0f66f22