【发布时间】：2022-01-12 02:30:21
【问题描述】：
这里发生了几个问题：
- 只有删除图标触发 onPress()
- 我尝试了不同的 JSX 组件嵌套，以使更新图标无法触发
- 如果这很重要，由于某种原因，同一页面上 StackNavigator 中的“后退”箭头也不起作用。
- 此代码在 AVD 和 IOS 模拟器上完美运行
- TouchableOpacity 组件的 Alpha 效果未呈现
我已经广泛搜索，唯一类似的问题是绝对定位 TouchableOpacity 组件，这不是我的情况。
我也尝试过 onPress = {() Alert('click')}，但 Android 设备上没有任何反应。
return (
<View style={styles.container}>
<View style={styles.detailsPanel}>
{/* first row */}
<View style={styles.rowContainer}>
<View style={styles.firstColumn}>
<AppText size={16} color={STYLES.blue} weight='bold'>
{route.params.item.date}
</AppText>
</View>
<View style={styles.secondColumn}>
<View style={{ flex: 1, flexDirection: "row" }}>
<AppText size={16} color={STYLES.blue} weight='bold'>
{route.params.item.aircraft_type}
</AppText>
<AppText>{" "}</AppText>
<AppText size={16} color={STYLES.blue} weight='bold'>
{route.params.item.registration}
</AppText>
</View>
</View>
<View style={styles.thirdColumn}>
<AppText size={16} color={STYLES.blue} weight='bold'>
{route.params.item.duration}
</AppText>
</View>
</View>
{/* second row */}
<Separator />
<View style={styles.rowContainer}>
<View style={styles.firstColumn}>
<AppText size={16} color={STYLES.black}>
{route.params.item.route}
</AppText>
</View>
<View style={styles.thirdColumn}>
<AppText size={16} color={STYLES.black}>
{route.params.item.pilot_in_command ? "PIC" : ""}
{route.params.item.second_in_command ? "SIC" : ""}
{route.params.item.solo ? "Solo" : ""}
{route.params.item.dual ? "Dual" : ""}
</AppText>
</View>
</View>
{/* third row */}
<View style={styles.rowContainer}>
<View style={styles.firstColumn}>
<View style={styles.rowContainer}>
<AppText size={16} color={STYLES.black}>
Landings:
</AppText>
{route.params.item.landings_day ? (
<AppText size={16} color={STYLES.black}>
{" "}
Day {route.params.item.landings_day}
</AppText>
) : null}
{route.params.item.landings_night ? (
<AppText size={16} color={STYLES.black}>
{" "}
Night {route.params.item.landings_night}
</AppText>
) : null}
</View>
</View>
<View style={styles.secondColumn}></View>
<View style={styles.thirdColumn}>
<AppText size={16} color={STYLES.black}>
{route.params.item.instructor ? " CFI" : ""}
</AppText>
</View>
</View>
{/* fourth row */}
<View style={styles.rowContainer}>
<View style={styles.firstColumn}>
<View style={styles.rowContainer}>
{route.params.item.night ? (
<AppText size={16} color={STYLES.black}>
Night {route.params.item.night}
{" "}
</AppText>
) : null}
{route.params.item.instrument ? (
<AppText size={16} color={STYLES.black}>
Inst {route.params.item.instrument}
{" "}
</AppText>
) : null}
{route.params.item.simulated_instrument ? (
<AppText size={16} color={STYLES.black}>
Hood {route.params.item.simulated_instrument}
{" "}
</AppText>
) : null}
</View>
</View>
<View style={styles.thirdColumn}>
<AppText size={16} color={STYLES.black}>
{route.params.item.cross_country ? "XC" : ""}
{route.params.item.simulator ? " Sim" : ""}
</AppText>
</View>
</View>
<View style={styles.rowContainer}>
<View style={styles.firstColumn}>
<View style={styles.rowContainer}>
{approaches.map((appr, index) => (
<AppText size={16} color={STYLES.black} key={index}>
{appr.approach_type}-{appr.number}{" "}
</AppText>
))}
</View>
</View>
<View style={styles.thirdColumn}>
{route.params.item.hold ? <AppText size={16}>Hold</AppText> : null}
</View>
</View>
{/* fifth row */}
<View style={styles.rowContainer}>
<View style={styles.firstColumn}>
<AppText>{route.params.item.remarks}</AppText>
</View>
</View>
{/* sixth row */}
<Separator />
<View style={{ flexDirection: "row", marginBottom: 5 }}>
<TouchableOpacity
style={{
flex: 2,
backgroundColor: STYLES.danger,
alignItems: "center",
justifyContent: "center",
}}
onPress={() => {
showAlert(
route.params.item.id,
route.params.item.date,
route.params.item.route
);
}}
>
<View>
<MaterialCommunityIcons
name={"delete"}
size={30}
color={STYLES.white}
/>
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
navigation.navigate("FlightUpdate", {
item: route.params.item,
});
}}
style={{
flex: 2,
backgroundColor: STYLES.blue,
alignItems: "center",
justifyContent: "center",
}}
>
<View>
<MaterialCommunityIcons
name={"update"}
size={30}
color={STYLES.white}
style={{ padding: 5 }}
/>
</View>
</TouchableOpacity>
</View>
</View>
<MapView
style={styles.map}
mapPadding={{
top: 60,
bottom: 10,
right: 40,
left: 40,
}}
ref={mapRef}
>
{markers.map((marker) => (
<Marker
key={marker.key}
coordinate={marker.coordinates}
title={marker.title}
/>
))}
<Polyline
strokeColor={STYLES.blue}
strokeWidth={3}
geodesic={true}
coordinates={polylines}
/>
</MapView>
<ActivityModal visible={Context.activityVisibleValue}></ActivityModal>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
},
detailsPanel: {
flexDirection: "column",
width: "100%",
margin: 0,
backgroundColor: STYLES.white,
borderRadius: STYLES.borderRadius,
padding: STYLES.borderRadius,
backgroundColor: STYLES.white,
borderRadius: STYLES.borderRadius,
},
rowContainer: {
flexDirection: "row",
paddingBottom: 5,
},
firstColumn: {
flex: 1,
flexDirection: "column",
},
secondColumn: {
flex: 2,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
},
thirdColumn: {
flex: 1,
flexDirection: "column",
alignItems: "flex-end",
},
text: {
fontFamily: STYLES.font,
color: STYLES.blue,
},
map: {
flex: 1,
width: Dimensions.get("window").width,
height: Dimensions.get("window").height,
borderRadius: STYLES.borderRadius,
},
});```
【问题讨论】：
标签： react-native expo jsx