我是新的React原生。我有一个自定义的头组件,并在其上创建了一个可触摸的橙子不透明,我想提出一个模态组件按下它。这是可能的这样做的React原生。请建议一些方法。
随附试用代码和屏幕截图。
<TouchableOpacity
onPress={() => {
openPop();
}}
>
<View
style={{
flexDirection: "row",
alignItems: "center",
backgroundColor: "orange",
}}
>
{backButton ? (
<TouchableOpacity
onPress={backHandler}
style={{
height: moderateScale(30),
width: moderateScale(30),
justifyContent: "center",
alignItems: "center",
}}
>
<Image
source={backWhiteIcon}
resizeMode="contain"
style={{
height: moderateScale(30),
width: moderateScale(30),
}}
/>
</TouchableOpacity>
) : (
<Image
source={backWhiteIcon}
resizeMode="contain"
style={{
height: moderateScale(30),
width: moderateScale(30),
}}
/>
)}
<View>
<Text
style={{
marginLeft: moderateScale(8),
fontFamily: FONT_FAMILY.regular,
fontSize: FONT_SIZE.font_14,
fontWeight: FONT_WEIGHT.fontWeight7,
lineHeight: moderateScale(19.12),
color: titleColor,
}}
>
{title}
</Text>
<Text
style={{
marginLeft: moderateScale(8),
fontFamily: FONT_FAMILY.regular,
fontSize: FONT_SIZE.font_12,
fontWeight: FONT_WEIGHT.fontWeight4,
lineHeight: moderateScale(16.39),
color:"white"
}}
>
P&L
</Text>
</View>
</View>
</TouchableOpacity>
这是onPress函数
const openPop = () => {
return (
<View>
<Modal>
<View style={{ flex: 1 }}>
<Text>I am the modal content!</Text>
</View>
</Modal>
</View>
);
};
我希望此模态打开图像
中橙子区域的onclick
1条答案
按热度按时间luaexgnf1#
这取决于导航的结构是如何实现的,我猜你使用的是
react-navigation
,如果是这样,一个可能的解决方案是在导航的根目录中定义模态。大概是这样的
这样你的模态就可以用
navigation.navigate()
来访问了,所以在你的头组件onPress
中,只要调用navigation.navigate('Modal')
来显示你的模态。